前端项目上线过程中的常见问题及解决方案

在前端项目的上线过程中，经常会遇到各种问题，这些问题可能会导致项目无法正常部署或运行。本文将详细讨论三个常见的问题及其解决方案：

问题1：打包时使用 copy-webpack-plugin 引入外部配置文件，但项目发布后拿到的配置文件是错误的

问题描述

在使用 copy-webpack-plugin 打包时，虽然配置文件被成功复制到目标目录，但项目发布后发现配置文件的内容是错误的。这通常是因为配置文件的路径或内容在打包过程中被错误处理。

解决方案

1. 检查配置文件的路径：确保 copy-webpack-plugin 的 from 和 to 路径配置正确。
2. 使用绝对路径：使用 path.resolve 确保路径的正确性。
3. 检查文件内容：确保配置文件在复制前内容正确，没有被其他脚本或任务修改。

例如，假设你想要将 public 目录下的 config.json 文件复制到 dist 目录下，可以在 webpack.config.js 中这样配置：

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  // ... 其他配置
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'public/config.json'),
          to: path.resolve(__dirname, 'dist/config.json')
        }
      ]
    })
  ]
};

问题2：前端项目在打包时报错 UglifyJs Unexpected token: punc (,)

问题描述

在使用 UglifyJsPlugin 进行代码压缩时，报错 UglifyJs Unexpected token: punc (,)。这通常是因为 UglifyJs 无法正确解析某些 ES6+ 语法。

解决方案

1. 使用 babel-loader 转换 ES6+ 语法：确保你的项目中已经安装了 babel-loader 和相关的 Babel 插件，以便将 ES6+ 语法转换为 ES5 语法。
2. 使用 TerserPlugin 替代 UglifyJsPlugin：从 Webpack 4 开始，UglifyJsPlugin 已经被 TerserPlugin 替代，TerserPlugin 更好地支持 ES6+ 语法。

例如，安装 terser-webpack-plugin 并在配置中使用它：（Webpack 4需要安装terser-webpack-plugin@4.*.* ，Webpack 5需要安装terser-webpack-plugin@5.*.*）

npm install --save-dev terser-webpack-plugin

然后在 webpack.config.js 中配置 TerserPlugin：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ... 其他配置
  plugins: [
      // ... 其他配置
      new TerserPlugin({
      cache: true,
	    sourceMap: false,
	    parallel: true,
	    terserOptions: {
	        ecma: undefined,
	        warnings: false,
	    	parse: {},
	    	compress: {
	    		drop_console: true,
	    		drop_debugger: false,
	    		pure_funcs: ['console.log'],
	    	},
	    },
    }),    
  ],
};

问题3：前端项目发布成功后，页面报错 Refused to execute script from "**" is not executable, and strict MIME type checking is enabled

参见 解决 Refused to execute script from "**" is not executable, and strict MIME type checking is enabled. - Yang9710 - 博客园