[SOLVED] webpack and terser leaks source filenames in minified output

webpack and terser leaks source filenames in minified output

Is there a way to prevent source filenames from propagating to webpack output, when using Terser to minify?

Example

In the .js output file produced by my minified production React app build, I'm still seeing un-mangled source filenames in the output.

Example excerpt:

[...]
({"../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");
[...]

You can see a few things here:

My proprietary code has some sort of module called MyApiClient.js
We're using axios and Sentry

Webpack config

Here's the relevant portion of our production webpack config:

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

The problem

My concern is that this is leaking information about the internal structure of our app, and I haven't quite found the right place in the stack (webpack options? terser options?) to prevent it.

Though the examples above are benign, and of course no amount of mangling makes the code impervious to reverse engineering the functionality, I don't want to make it too easy for others to understand how the app is built & what features it may be hiding.

Thanks!

Solution

This is related to webpack's optimization.namedModules option which should be false by default, maybe it is enabled in your config.

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