javascript - vue-cli4使用terser-webpack-plugin时exclude不生效？

Question

关于vue-cli4使用terser-webpack-plugin时, exclude不生效

我的目的就是想让utils.js文件下 console.* 都能打印 其余文件的console移除

1. vue-cli4本自带terser，使用过exclude，发现打印出来没有exclude于是安装了插件

// 原始代码config.when(process.env.NODE_ENV === 'production', (config) => {      config.optimization.minimizer('terser').tap((args) => {        args[0].terserOptions.compress.drop_console = true        args[0].terserOptions.compress.drop_debugger = true        args[0].terserOptions.compress.pure_funcs = ['console.log']        args[0].terserOptions.output = {          comments: false,        }        return args      })

2. 接着自行升级了cli和安装terser-webpack-plugin

"@vue/cli-service": "~4.5.19",
"terser-webpack-plugin": "~4.2.3",

config.optimization.minimizer('terser').use(TerserPlugin, [        {          minify: TerserPlugin.esbuildMinify,          terserOptions: {            compress: {              drop_console: true,              drop_debugger: true,            },            mangle: {              safari10: true, // 解决ie，safari10.1不支持ES6语句            },          },          exclude: /\/utils/,        },      ])

已经添加了exclude，utils.js 文件不做处理，但是正式环境还是没有打印

不知道哪个环境出了问题

Answer 1

根据你的描述，你正在使用Vue CLI 4和Terser Webpack Plugin来压缩你的代码，并试图排除utils.js文件。然而，你发现exclude选项并没有生效。

首先，确保你的webpack配置正确地指向了terser-webpack-plugin。你需要确认在vue.config.js或webpack配置文件中正确地引用了该插件。

你的代码看起来应该是正确的，但有一些可能的问题：

1. 路径问题：确保exclude使用的正则表达式是正确的，并且确实指向了utils.js文件。在你的例子中，你使用了exclude: /\/utils/，这可能会匹配到其他包含"utils"的路径。如果你的utils.js文件在根目录下，你可能需要使用exclude: /utils\.js$。
2. 版本问题：你可能需要检查你的@vue/cli-service和terser-webpack-plugin的版本是否兼容。有时候，新版本的插件可能不与旧版本的CLI兼容。
3. 插件配置：确认TerserPlugin的配置是否正确。你可以尝试打印出TerserPlugin的配置以检查是否正确。
4. 重新安装依赖：有时候，重新安装项目依赖可以解决一些奇怪的问题。尝试删除node_modules目录和package-lock.json文件，然后运行npm install或yarn install。
5. 检查其他插件或加载器：有时候，其他webpack插件或加载器可能会影响TerserPlugin的行为。确认没有其他插件或加载器修改或覆盖了TerserPlugin的配置。

如果以上方法都不能解决问题，你可能需要更详细地检查你的webpack配置，或者考虑在StackOverflow或Vue社区中寻求更具体的帮助。