webpack 和 terser 在缩小输出中泄漏源文件名

Question

有没有办法在使用 Terser 缩小时阻止源文件名传播到 webpack 输出？

例子

在我的缩小版 React 应用构建生成的 .js 输出文件中，我仍然在输出中看到未损坏的源文件名。

示例摘录：

[...]
({"../js/dashboard/lib/MyApiClient.js":function(e,t,n){"use
strict";n.r(t),n.d(t,"default",function(){return c});var
o=n("../node_modules/axios/index.js"),r=n.n(o),
s=n("../node_modules/@sentry/browser/esm/index.js");
[...]

你可以在这里看到一些东西：

我的专有代码有某种名为 MyApiClient.js
我们正在使用 axios 和 Sentry

Webpack 配置

这是我们的生产 webpack 配置的相关部分：

  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        sourceMap: true,
        extractComments: false,
        terserOptions: {
          output: {
            comments: false,
          },
        },
      }),
    ],
  },

问题

我担心的是，这泄露了我们应用程序内部结构的信息，我还没有在堆栈中找到正确的位置（webpack 选项？更简洁的选项）？）以防止它。

虽然上面的例子是良性的，当然再多的修改也无法使代码不受逆向工程功能的影响，但我不想让它太容易其他人了解该应用程序的构建方式及其可能隐藏的功能。

谢谢！

Answer 1

考虑在生产环境中启用 sourceMap: false，因为这是将代码映射到文件名的功能。

Answer 2

这与 webpack 的 optimization.namedModules 选项有关，默认情况下应该是 false，也许它在您的配置中启用了。

// webpack.config.js
module.exports = {
  //...
  optimization: {
    namedModules: false
  }
};

webpack 和 terser 在缩小输出中泄漏源文件名

webpack and terser leaks source filenames in minified output

javascript

webpack

terser

例子

Webpack 配置

问题