Webpack中自定义SourceMap生成

线上发布Web为了方便追溯用户的具体报错，我们会开启SourceMap，是发包发布时会将SourceMap上传到我们的RUM平台，这样当用户出现报错时，通过RUM平台上的SourceMap也可以追溯到源码的报错位置。但也并非构建打包的所有文件都需要生成sourcemap，那么如何定制呢？

开启SourceMap

Webpack中，简单点呢的话会是如下配置。

{
  ...
  devtool: 'source-map',
  ...
}

这样做的弊端是所有的JS文件都会生成SourceMap，如果我们想排除某些呢，比如我们懒加载第三方模块，比如MonacoEditor。Webpack也是支持定制化SourceNap生成的。

定制SourceMap

注意devtool: 'source-map'需要关闭，或者配置为false。否则插件配置会不work.

 devtool: false,
 plugins: [
  new webpack.SourceMapDevToolPlugin({
      filename: '[file].map[query]',
      exclude: [/monaco_/],
    })
 ]

如上配置即可排除掉文件名包含monaco_的JS文件。

注意：我们构建打包JS文件时一般会选择文件名上配置内容哈希，那么当开启SourceMap，JS文件结尾有增加//# sourceMappingURL=x x x.4ea8e146beed0e49c7c5.js.map这样的注释，那么本身这个JS文件的内容哈希也会发生变化。

写在最后

done。