This plugin enables more fine grained control of source map generation. It is an alternative to the devtool configuration option.

new webpack.SourceMapDevToolPlugin(options)


The following options are supported:

The lineToLine object allows for the same test, include, and exclude options described above.

The fileContext option is useful when you want to store source maps in an upper level directory to avoid ../../ appearing in the absolute [url].

Setting module and/or columns to false will yield less accurate source maps but will also improve compilation performance significantly.


The following examples demonstrate some common use cases for this plugin.

Exclude Vendor Maps

The following code would exclude source maps for any modules in the vendor.js bundle:

new webpack.SourceMapDevToolPlugin({
  filename: '[name]',
  exclude: ['vendor.js']

Host Source Maps Externally

Set a URL for source maps. Useful for hosting them on a host that requires authorization.

new webpack.SourceMapDevToolPlugin({
  append: "\n//# sourceMappingURL=[url]",
  filename: '[name].map'

And for cases when source maps are stored in the upper level directory:

|- dist
  |- public
    |- bundle-[hash].js
  |- sourcemaps
    |- bundle-[hash]

With next config:

new webpack.SourceMapDevToolPlugin({
  filename: "sourcemaps/[file].map",
  publicPath: "",
  fileContext: "public"

Will produce the following URL:[hash]`

Further Reading