配置 SourceMapDevToolPlugin 以生成“source-map”答案

【问题标题】：configure SourceMapDevToolPlugin to generate "source-map"配置 SourceMapDevToolPlugin 以生成“source-map”
【发布时间】：2019-02-13 04:02:03
【问题描述】：

TL;DR

我需要在 SourceMapDevToolPlugin 中设置哪些配置选项来模拟 devtool: 'source-map'？

我有使用SourceMapDevToolPlugin 来避免为我的供应商模块生成源映射......但我想要source-map 样式映射，而不是inline-source-map。

详情：

我正在使用 webpack 4，不想浪费时间生成 vendor.js.map，所以我不能只设置 devtool，而是这样做：

https://webpack.js.org/plugins/source-map-dev-tool-plugin/#exclude-vendor-maps

但我注意到这条评论：

您可以使用以下代码将配置选项 devtool: inline-source-map 替换为等效的自定义插件配置：

我一辈子都想不出我需要传递给插件的哪些选项来复制devtool: 'source-map'，而不是inline-source-map

我的 package.json：

"scripts": {
   "build": "webpack -p --config webpack.prod.js",
   "start": "webpack-dev-server --debug --bail --config webpack.dev.js"
},

我的（相关的）webpack 配置：

module.exports = {
   devtool: false, // using SourceMapDevToolPlugin instead
   optimization: {
     splitChunks: {
       cacheGroups: {
         commons: {
           test: /[\\/]node_modules[\\/]/,
           name: 'vendors',
           chunks: 'all'
         },
         styles: {
           test: /\.css$/,
           name: 'styles',
           chunks: 'all'
         }
      }
   },
   plugins: [
     new webpack.SourceMapDevToolPlugin({
       filename: '[name].map',
       exclude: ['vendor.js']
     })
   ]
}

和我的开发配置：

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    contentBase: './public',
    stats: 'minimal'
  }
});

和我的产品配置

module.exports = merge(common, {
  mode: 'production',
  stats: 'errors-only'
});

【问题讨论】：

标签： javascript webpack-4

【解决方案1】：

我在试图从源映射中排除部分代码时遇到了同样的问题。由于在网上无法得到满意的答案，于是查看了Webpack的源码，发现Webpack使用的代码如下

https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js

if (
            options.devtool &&
            (options.devtool.includes("sourcemap") ||
                options.devtool.includes("source-map"))
        ) {
            const hidden = options.devtool.includes("hidden");
            const inline = options.devtool.includes("inline");
            const evalWrapped = options.devtool.includes("eval");
            const cheap = options.devtool.includes("cheap");
            const moduleMaps = options.devtool.includes("module");
            noSources = options.devtool.includes("nosources");
            legacy = options.devtool.includes("@");
            modern = options.devtool.includes("#");
            comment =
                legacy && modern
                    ? "\n/*\n//@ source" +
                      "MappingURL=[url]\n//# source" +
                      "MappingURL=[url]\n*/"
                    : legacy
                    ? "\n/*\n//@ source" + "MappingURL=[url]\n*/"
                    : modern
                    ? "\n//# source" + "MappingURL=[url]"
                    : null;
            const Plugin = evalWrapped
                ? EvalSourceMapDevToolPlugin
                : SourceMapDevToolPlugin;
            new Plugin({
                filename: inline ? null : options.output.sourceMapFilename,
                moduleFilenameTemplate: options.output.devtoolModuleFilenameTemplate,
                fallbackModuleFilenameTemplate:
                    options.output.devtoolFallbackModuleFilenameTemplate,
                append: hidden ? false : comment,
                module: moduleMaps ? true : cheap ? false : true,
                columns: cheap ? false : true,
                lineToLine: options.output.devtoolLineToLine,
                noSources: noSources,
                namespace: options.output.devtoolNamespace
            }).apply(compiler);
        }

所以您可以看到，SourceMapDevToolPlugin 的选项可能取决于您的一些输出 webpack 配置（sourceMapFilename、devtoolModuleFilenameTemplate、devtoolFallbackModuleFilenameTemplate、devtoolLineToLine、devtoolNamespace - 请参阅https://webpack.js.org/configuration/output）。

对于我的 webpack 配置，当我使用 devtool: 'source-map' 时进入 SourceMapDevToolPlugin 的最终选项如下：

{
    "filename": "[file].map[query]",
    "append": null,
    "module": true,
    "columns": true,
    "lineToLine": false,
    "noSources": false,
    "namespace": ""
}

如果您没有使用任何提到的输出选项，那么上面的内容对您来说应该没问题。否则，您将需要考虑它们。您可以修改 node_modules/webpack/lib/WebpackOptionsApply.js 以添加带有 JSON.stringify() 的 console.log 以查看用于 Webpack 配置的确切参数。

希望这会有所帮助。

【讨论】：

"你可以修改 node_modules/webpack/lib/WebpackOptionsApply.js 添加一个带有 JSON.stringify() 的 console.log" - slick

【解决方案2】：

从文档中，强调我的：

filename (string)：定义 SourceMap 的输出文件名（如果没有提供值，将被内联）。

这意味着如果您指定filename 选项，您的行为与devtool: 'source-map' 相同

devtool: 'inline-source-map' === new webpack.SourceMapDevToolPlugin({})

devtool: 'source-map' === new webpack.SourceMapDevToolPlugin({ filename: '[file].map' })

【讨论】：