This plugin enables more fine grained control of source map generation. It is also enabled automatically by certain settings of the devtool
configuration option.
new webpack.SourceMapDevToolPlugin(options);
The following options are supported:
test
(string|regex|array
): Include source maps for modules based on their extension (defaults to .js
and .css
).include
(string|regex|array
): Include source maps for module paths that match the given value.exclude
(string|regex|array
): Exclude modules that match the given value from source map generation.filename
(string
): Defines the output filename of the SourceMap (will be inlined if no value is provided).append
(string
): Appends the given value to the original asset. Usually the #sourceMappingURL
comment. [url]
is replaced with a URL to the source map file. false
disables the appending.moduleFilenameTemplate
(string
): See output.devtoolModuleFilenameTemplate
.fallbackModuleFilenameTemplate
(string
): See link above.module
(boolean
): Indicates whether loaders should generate source maps (defaults to true
).columns
(boolean
): Indicates whether column mappings should be used (defaults to true
).lineToLine
(object
): Simplify and speed up source mapping by using line to line source mappings for matched modules.noSources
(boolean
): Prevents the source file content from being included in the source map (defaults to false
).publicPath
(string
): Emits absolute URLs with public path prefix, e.g. https://example.com/project/
.fileContext
(string
): Makes the [file]
argument relative to this directory.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]
.
Settingmodule
and/orcolumns
tofalse
will yield less accurate source maps but will also improve compilation performance significantly.
If you want to use a custom configuration for this plugin in development mode, make sure to disable the default one. I.e. set devtool: false
.
Remember that when using theUglifyJSPlugin
, you must utilize thesourceMap
option.
The following examples demonstrate some common use cases for this plugin.
You can use the following code to replace the configuration option devtool: inline-source-map
with an equivalent custom plugin configuration:
module.exports = { // ... devtool: false, plugins: [ new webpack.SourceMapDevToolPlugin({}) ] };
The following code would exclude source maps for any modules in the vendor.js
bundle:
new webpack.SourceMapDevToolPlugin({ filename: '[name].js.map', exclude: ['vendor.js'] });
Set a URL for source maps. Useful for hosting them on a host that requires authorization.
new webpack.SourceMapDevToolPlugin({ append: '\n//# sourceMappingURL=http://example.com/sourcemap/[url]', filename: '[name].map' });
And for cases when source maps are stored in the upper level directory:
project |- dist |- public |- bundle-[hash].js |- sourcemaps |- bundle-[hash].js.map
With next config:
new webpack.SourceMapDevToolPlugin({ filename: 'sourcemaps/[file].map', publicPath: 'https://example.com/project/', fileContext: 'public' });
Will produce the following URL:
https://example.com/project/sourcemaps/bundle-[hash].js.map
© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/plugins/source-map-dev-tool-plugin