Customizing Source Map Generation in Webpack

For production web releases, we enable Source Maps to trace errors back to source code via our RUM platform. Not every bundle needs a Source Map though. How can we customize which files get one?

Enable Source Maps

In Webpack, a simple configuration looks like this:

{
  ...
  devtool: 'source-map',
  ...
}

The downside is that every JS file will get a Source Map. Suppose you want to exclude certain files, e.g., lazily loaded third‑party modules like Monaco Editor. Webpack supports customizing Source Map generation.

Customize Source Maps

Make sure to disable devtool: 'source-map' (set it to false), otherwise the plugin config below won’t take effect.

 devtool: false,
 plugins: [
  new webpack.SourceMapDevToolPlugin({
      filename: '[file].map[query]',
      exclude: [/monaco_/],
    })
 ]

With this configuration, files whose names contain monaco_ will be excluded from Source Map generation.

Note: when bundling JS with content hashes in filenames, enabling Source Maps adds a //# sourceMappingURL=xxx.4ea8e146beed0e49c7c5.js.map comment at the end of the JS file, which changes the file content—and thus its content hash.

Final Thoughts

Done.