SourceMapDevToolPlugin

本插件實現(xiàn)了對 source map 生成內(nèi)容進(jìn)行更細(xì)粒度的控制。它也可以根據(jù) devtool 配置選項的某些設(shè)置來自動啟用。

new webpack.SourceMapDevToolPlugin(options);

配置項

支持以下配置項：

• ?test（string RegExp [string, RegExp]）?：包含基于擴(kuò)展名的模塊的 source map（默認(rèn)是 .js, .mjs 和 .css）。
• ?include（string RegExp [string, RegExp]）?：使路徑與該值匹配的模塊生成 source map。
• ?exclude（string RegExp [string, RegExp]）?：使匹配該值的模塊不生成 source map。
• ?filename（string）?：定義生成的 SourceMap 的名稱（不設(shè)置將默認(rèn)置為 inlined）。
• ?append（string）?：在原始資源后追加給定值。通常是 #sourceMappingURL 注釋。[url] 被替換成 source map 文件的 URL。webpack v4.36.0 之后支持 path 參數(shù)：[chunk]、[filename] 和 [contenthash]。設(shè)置 append 為 false 會禁止追加。
• ?moduleFilenameTemplate（string）?：查看 output.devtoolModuleFilenameTemplate。
• ?fallbackModuleFilenameTemplate（string）?：查看上面的鏈接。
• ?namespace（string）?：查看 output.devtoolNamespace。
• ?module = true（boolean）?：表示 loader 是否生成 source map。
• ?columns = true（boolean）?：表示是否應(yīng)該使用 column mapping。
• ?noSources = false（boolean）?：防止源文件的內(nèi)容被包含在 source map 中。
• ?publicPath (string)?：生成帶 public path 前綴的絕對 URL，例如：https://example.com/project/。
• ?fileContext (string)?：使得 [file] 參數(shù)作為本目錄的相對路徑。
• ?sourceRoot（string）?：給 SourceMap 中的 sourceRoot 屬性提供一個自定義值。

fileContext 配置在你想要將 source map 存儲到上層目錄，以避免 ../../ 出現(xiàn)在絕對路徑 [url] 里面時是有用的。

示例

下面的示例展示了本插件的一些常見用例。

基本使用

你可以使用以下代碼將配置項 devtool: inline-source-map 替換為等效的自定義插件配置：

module.exports = {
  // ...
  devtool: false,
  plugins: [new webpack.SourceMapDevToolPlugin({})],
};

排除 Vendor Maps

以下代碼會排除 vendor.js bundle 內(nèi)模塊的 source map。

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

在宿主環(huán)境外部化 source map

設(shè)置 source map 的 URL。在宿主環(huán)境需要授權(quán)的情況下很有用。

new webpack.SourceMapDevToolPlugin({
  append: '\n//# sourceMappingURL=https://example.com/sourcemap/[url]',
  filename: '[name].map',
});

還有一種場景，source map 存儲在上層目錄中時：

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

如下設(shè)置：

new webpack.SourceMapDevToolPlugin({
  filename: 'sourcemaps/[file].map',
  publicPath: 'https://example.com/project/',
  fileContext: 'public',
});

將會生成以下 URL：

https://example.com/project/sourcemaps/bundle-[hash].js.map

Further Reading

• Building Source Maps