javascript - 配置 SourceMapDevToolPlugin 生成 "source-map"

Question

长话短说

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

我有使用SourceMapDevToolPlugin来避免为​​我的 vendor 模块生成源映射....但我想要source-map风格 map ，而不是 inline-source-map。

详细信息:

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

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

但我注意到这个评论:

You can use the following code to replace the configuration option devtool: inline-source-map with an equivalent custom plugin configuration:

在我的一生中，我无法弄清楚我需要将哪些选项传递给插件来复制 devtool: 'source-map'，而不是 inline-源图

我的 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'
});

Answer 1

来自文档，强调我的:

filename (string):定义 SourceMap 的输出文件名(将被内联，如果没有提供值/强>).

这意味着如果您指定 filename 选项，您将具有与 devtool: 'source-map'

相同的行为

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

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