Webpack中自定义SourceMap生成

发表于 2024-06-30 更新于 2025-04-21 本文字数： 701 阅读时长 ≈ 1 分钟

本文是作者对Webpack中自定义SourceMap生成的介绍，包括Webpack中自定义SourceMap生成的优势、实现细节、相关资料等，这些步骤可以帮助作者提高Webpack中自定义SourceMap生成的效率。

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

开启SourceMap

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

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

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

注意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。