SourceMapDevToolPlugin and minimize creates two source-maps

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

With webpack 4.5.0, using both optmization.splitChunks optmization.minimize and SourceMapDevToolPlugin I have two source-maps.

The built files:

app_89f9b58e110d87e7b92d.js
app_89f9b58e110d87e7b92d.js.map
app.js.map
app-pages_c9d1f676bc1cbc7a2dff.js
app-pages_c9d1f676bc1cbc7a2dff.js.map
app-pages.js.map
rev-manifest.json
shared-api_e6065b9ffab03e920e47.js
shared-api_e6065b9ffab03e920e47.js.map
shared-api.js.map
shared-components_472202e5757e782c0d72.js
shared-components_472202e5757e782c0d72.js.map
shared-components.js.map
shared-icons_4aed87fe376c550e63fe.js
shared-icons_4aed87fe376c550e63fe.js.map
shared-icons.js.map
vendors_3dba8e19c7fd17f646db.js
vendors_3dba8e19c7fd17f646db.js.map
vendors.js.map
vendors-react_e9da2347c5510b6215ce.js
vendors-react_e9da2347c5510b6215ce.js.map
vendors-react.js.map
vendors-ui_6fa526a4d34e558d52c5.js
vendors-ui_6fa526a4d34e558d52c5.js.map
vendors-ui.js.map
vendors-utils_059bf9f47e8a413051e0.js
vendors-utils_059bf9f47e8a413051e0.js.map
vendors-utils.js.map

The files like vendors-utils.js.map should not be there.
The content is this one:

{"version":3,"sources":[],"names":[],"mappings":"","file":"vendors-utils_059bf9f47e8a413051e0.js","sourceRoot":""}

The sourceMappingURL in JS is doubled:

//# sourceMappingURL=https://s3-eu-west-1.amazonaws.com/mycompany-sourcemaps/vendors-utils_059bf9f47e8a413051e0.js.map
//# sourceMappingURL=vendors-utils.js.map

If the current behavior is a bug, please provide the steps to reproduce.

This is my config:

  devtool: 'source-map',
  optimization: {
    minimize: true,
    splitChunks: {
      'vendors-ui': {
        name: 'vendors-ui',
        test: /node_modules\/(thumbor|material-ui)/,
        enforce: true,
      },
      'vendors-utils': {
        name: 'vendors-utils',
        test: /node_modules\/(lodash|moment|mobile-detect|immutable)/,
        enforce: true,
      },
      'vendors-react': {
        name: 'vendors-react',
        test: /node_modules\/react/,
        enforce: true,
      },
      vendors: {
        name: 'vendors',
        test: /node_modules\/(?!react|material-ui|thumbor|lodash|moment|mobile-detect|immutable)/,
        enforce: true,
      },
      'app-pages': {
        name: 'app-pages',
        test: /[\\/]scripts\/pages/,
        enforce: true,
      },
      'shared-icons': {
        name: 'shared-icons',
        test: /shared\/.*\/icons/,
        enforce: true,
      },
      'shared-api': {
        name: 'shared-api',
        test: /[\\/]shared\/scripts\/api[\\/]/,
        enforce: true,
        chunks: 'all',
      },
      'shared-components': {
        name: 'shared-components',
        test: /[\\/]shared\/scripts\/components\/(?!icons).+/,
        enforce: true,
      },
    },
  output: {
    publicPath: `https://s3-eu-west-1.amazonaws.com/mycompany-website/`,
    filename: '[name]_[chunkhash].js',
    chunkFilename: '[name]_[chunkhash].js',
  },
  ....
    new webpack.SourceMapDevToolPlugin({
      filename: '[file].map',
      append: `//# sourceMappingURL=https://s3-eu-west-1.amazonaws.com/mycompany-sourcemaps${publicPath}/[url]`,
    }),

What is the expected behavior?

I should have only one source-map and only one sourceMappingURL in JS bundle

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.

Author: Fantashit

1 thought on “SourceMapDevToolPlugin and minimize creates two source-maps

Comments are closed.