webpack - 如何避免库与 UglifyJs 或 Terser Webpack 插件混淆？

Question

只有当我将 mangle.properties 设置为 true 时，才能使用 terser-webpack-plugin 修改我的代码。我也需要破坏属性，但如果我打开它，就会出现与使用的库相关的各种问题。所以我想将 lib-sources(在 node_modules 内)排除在缩小/处理流程之外。

我正在使用 babel 将所有内容从 es6 及更高版本转换为 es5。我正在使用 webpack 4 顺便说一下。

看起来我面临的问题是 webpack 中的所有缩小仅适用于最终输出的 javascript 而不是源文件。

我尝试将库的类名放在 mangle 选项中的保留数组中，但到目前为止没有帮助。我也尝试过反过来工作；在 terserplugin 上使用正则表达式来仅将插件用于最重要的对象以缩小和破坏，但这没有按预期工作，可能是因为 babel transpiling。而不是我所追求的。我想至少缩小/破坏我拥有的所有代码，并且更喜欢将库也缩小，但不要破坏。

我之前使用的是 uglifyjs-webpack-plugin 和 uglifyjs-3-webpack-plugin，但现在切换到 terser-webpack-plugin，因为这似乎更适合 future ，并且有更多支持。因此，如果有人知道 terser-webpack-plugin(它与 uglifgyjs 具有几乎相同的配置/api)的解决方案，那将是首选。但我也乐于接受其他插件的答案，如果可行的话，我可能会转回去。

几天来，我一直在努力让它发挥作用，并且一直在挖掘 terserplugin 的所有(!)设置以寻找我需要的东西，但找不到。希望这里的任何人都可以帮助我。谢谢!

Answer 1

我以为我不知道该怎么做，但我发现了。

根据 terser-webpack-plugin 文档，您可以使用 test 来选择要缩小的文件，如下所示:

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        test: /\.js(\?.*)?$/i,
      }),
    ],
  },
};

所以你想添加 2 个 new TerserPlugin(...)，一个用于测试你确实想要 mangle 属性的文件(以及在选项中启用的 mangle 属性)，另一个用于您不想破坏属性的文件(并且禁用了破坏属性)。