本插件实现了对 source map 生成,进行更细粒度的控制。它可以替代 devtool
选项。
new webpack.SourceMapDevToolPlugin(options)
支持以下选项:
test
(string|regex|array
):包含基于扩展名的模块的 source map(默认是 .js
和 .css
)。include
(string|regex|array
):使路径与该值匹配的模块生成 source map。exclude
(string|regex|array
):使匹配该值的模块不生成 source map。filename
(string
):定义生成的 source map 的名称(如果没有值将会变成 inlined)。append
(string
):在原始资源后追加给定值。通常是 #sourceMappingURL
注释。[url]
被替换成 source map 文件的 URL。false
将禁用追加。moduleFilenameTemplate
(string
): 查看 output.devtoolModuleFilenameTemplate
.fallbackModuleFilenameTemplate
(string
):同上。module
(boolean
):表示 loader 是否生成 source map(默认为 true
)。columns
(boolean
):表示是否应该使用 column mapping(默认为 true
)。lineToLine
(object
):通过行到行源代码映射(line to line source mappings)简化和提升匹配模块的源代码映射速度。noSources
(boolean
):防止源文件的内容被包含在 source map 里(默认为 false
)。publicPath
(string
):生成带 public path 前缀的绝对 URL,例如:https://example.com/project/
。fileContext
(string
):使得 [file]
参数作为本目录的相对路径。lineToLine
对象允许的值和上面 test
,include
,exclude
选项一样。
fileContext
选项在你想要将 source maps 存储到上层目录,避免 ../../
出现在绝对路径 [url]
里面时有用。
T> 设置 module
和/或 columns
为 false
将会生成不太精确的 source map,但同时会显著地提升编译性能。
W> 记得在使用 UglifyJSPlugin
时,必须使用 sourceMap
选项。
下面的示例展示了本插件的一些常见用例。
以下代码会排除 vendor.js
内模块的 source map。
new webpack.SourceMapDevToolPlugin({
filename: '[name].js.map',
exclude: ['vendor.js']
})
设置 source map 的 URL。在宿主环境需要授权的情况下很有用。
new webpack.SourceMapDevToolPlugin({
append: "\n//# sourceMappingURL=http://example.com/sourcemap/[url]",
filename: '[name].map'
})
还有一种场景,source map 存储在上层目录中时:
project
|- dist
|- public
|- bundle-[hash].js
|- sourcemaps
|- bundle-[hash].js.map
如下设置:
new webpack.SourceMapDevToolPlugin({
filename: "sourcemaps/[file].map",
publicPath: "https://example.com/project/",
fileContext: "public"
})
将会生成以下 URL:
https://example.com/project/sourcemaps/bundle-[hash].js.map`