Terser 插件 Webpack 排除/测试未按预期工作

Question

我想将 TerserPlugin 用于优化我的一些代码，并从 Terser 处理中排除一些第三方库（例如 vue），但无论我尝试什么测试，包含和排除都不起作用。 我的代码是用 Typescript 编写的（只有 *.ts 文件没有 .vue 文件）和大多数带有 js 的 3rd 方库，以防以后有问题。

我尝试使用以下正则表达式和字符串进行测试，包括和排除 TerserPlugin，如下所示：

1.) 没有指定测试子句，没有排除，没有包含：应用了 Terser，例如方法的局部变量在我的东西和 3rd 方库中被替换。这实际上很奇怪，因为 test 默认设置是 /\.m?js(\?.*)?$/ 根据 https://github.com/webpack-contrib/terser-webpack-plugin 这对于任何 *.ts 文件都是不正确的。因此我的 Typescript 文件不应该由 Terser 处理，而是

2.) test: /\.ts$/i - 我的文件或第三方库中没有更简洁的转换

3.) include: /\.ts$/i - 我的文件或第三方库中没有更简洁的转换

4.) include: /entities/i - 我的文件中没有更简洁的转换（夫妇在目录名称实体中）或第三方库

5.) exclude: /vue/i - 应用 Terser，例如方法的局部变量在我的东西和 3rd 方库中被替换

6.) exclude: "C:\Repositories\m2\node_modules\vue\dist\vue.esm.js" - 应用了 Terser，例如方法的局部变量在我的东西和 3rd 方库中被替换

7.) exclude: "C:/Repositories/m2/node_modules/vue/dist/vue.esm.js" - 应用 Terser，例如方法的局部变量在我的东西和 3rd 方库中被替换

8.) exclude: path.join(__dirname, 'node_modules/vue/dist/vue.esm.js') - 应用 Terser，例如方法的局部变量在我的东西和 3rd 方库中被替换

这对我来说没有任何意义。无论我放入什么似乎都失败了，例如test 和 include 似乎从来都不是真的，因此什么都没有被处理，并且 exclude 似乎也从来都不是真的，因此一切都被处理了。对我来说，这似乎是一个巨大的错误——实际上太大了，我无法相信。有人有什么想法吗？

这是我的 webpack 配置中的完整 Terser 配置，其中标有我放置正则表达式的位置

   optimization: {
          namedModules: true,
          chunkIds: 'size',
          moduleIds: 'hashed',
          removeAvailableModules: true, 
          removeEmptyChunks: true,
          mergeDuplicateChunks: true,
          usedExports: true,
          minimize: true,
          minimizer: [new TerserPlugin({
           - place where i put the regex test, exclude condition --
             extractComments: false,
             sourceMap: false,
             terserOptions: {
                output: {
                   comments: true,// to change
                   beautify: true,// to change
                },
                ecma: 6,
                warnings: true,// to change
                parse: {},
                mangle: {
                   eval: true, 
                   // mangle options
                   keep_classnames: false,
                   keep_fnames: false,
                   module: true,
                   toplevel: true,
                   safari10: false,
                },
                nameCache: null,
                ie8: false,
             }
          })],

我的 TerserPlugin 版本是：“terser-webpack-plugin”：“^1.4.1”

如果它可能重要，虽然我猜不是，这里是我的 webpack 模块配置：

module: {
      rules: [
         {  test: /\.vue$/,
            exclude: /node_modules/,
            loader: 'vue-loader'
         },
         {  test: /\.ts$/,
            exclude: /node_modules|vue\/src/,
            loader: "ts-loader"
         },
         {  test: /\.woff(2)?(\?v=[0-9]+\.[0-9]+\.[0-9]+)?$/, 
            loader: "url-loader?limit=10000&mimetype=application/font-woff&name=[name].[ext]",
            options: {
               outputPath: './m2/fonts',
            }
         },
         {  test: /\.(ttf|eot)(\?v=[0-9]+\.[0-9]+\.[0-9]+)?$/, 
            loader: "file-loader?name=[name].[ext]", 
            options: {
               outputPath: './m2/fonts',
            }
         },
         {  test:/\.sass$/,
            use:['style-loader','css-loader', 'sass-loader']
         },
         {  test:/\.(s*)css$/,
            use:['style-loader','css-loader', 'sass-loader']
         },
         {  test: /\.styl$/,
            loader: ['style-loader', 'css-loader', 'stylus-loader']
         },
         {  test: /\.js$/,
            exclude: /node_modules/,
            use: {
               loader: 'babel-loader',
               options: {
                  presets: ['@babel/preset-env']
               }
            }
         }
      ]
   },

Answer 1

我的理解是，Terser 适用于输出块而不是输入文件。

例如有一个 chunkfilter 选项：https://webpack.js.org/plugins/terser-webpack-plugin/#chunkfilter 声明：

允许过滤哪些块应该被丑化（默认情况下所有块都是丑化的）。

include/exclude 选项更加模糊。

所以我会得出结论，为了不处理供应商脚本 - 您必须将它们放在单独的缓存组中：https://webpack.js.org/plugins/split-chunks-plugin/#split-chunks-example-3，然后排除这个供应商块。

Answer 2

认为该插件适用于 .ts 文件和其他 source 文件的假设是错误的，这些文件位于您保存源代码的目录中。当插件开始工作时，.ts 文件已经被转译成 .js 文件。请参阅this 和that。