Webpack 4.2如何获取错误抛出的原始源文件名及行号？

我之前在项目里也碰到过这个坑，其实问题往往出在几个容易忽略的配置细节上，咱们一步步来排查：

1. 先确保Webpack全局开启了Source Map #

UglifyJS插件的sourceMap选项依赖Webpack本身生成的source map文件，所以首先要在Webpack配置的devtool字段里设置生产环境可用的source map类型，比如source-map（别用eval系列的，生产环境不支持）：

module.exports = {
  // ... 其他配置项
  devtool: 'source-map', // 生产环境推荐用这个，生成完整的独立source map文件
  plugins: [
    // 你的UglifyJS插件配置
  ]
};

2. 检查UglifyJS插件的版本和配置方式 #

Webpack 4里默认生产模式会自动启用压缩，但如果你是手动配置Uglify，要注意几个点：

• 别用Webpack内置的旧版webpack.optimize.UglifyJsPlugin，这个在Webpack 4里已经废弃了，必须安装独立的uglifyjs-webpack-plugin：

  npm install uglifyjs-webpack-plugin --save-dev
  

• 在Webpack 4中，压缩配置要放在optimization.minimizer里，而不是直接放在plugins数组中，同时开启sourceMap: true：

  const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  
  module.exports = {
    // ... 其他配置
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          sourceMap: true // 必须开启这个选项
        })
      ]
    }
  };
  

3. 确认Source Map文件正确生成并可访问 #

编译完成后，去你的输出目录（比如dist）看看有没有对应的.js.map文件，比如main.[contenthash].js.map：

• 如果没有生成，说明Webpack的devtool配置有问题，或者插件冲突导致map文件被删除；
• 如果生成了，要确保你的生产服务器能正确提供这些map文件（浏览器只会在开发者工具开启时加载，不会影响普通用户）；
• 要是用了CDN，可以在output里指定source map的输出路径，避免路径错误：

  output: {
    filename: '[name].[contenthash].js',
    sourceMapFilename: '[name].[contenthash].js.map'
  }
  

4. 排查其他可能的干扰插件 #

有些插件可能会影响source map的生成：

• 比如CleanWebpackPlugin，要确保它没有误删生成的.map文件；
• 或者HtmlWebpackPlugin这类注入资源的插件，不需要手动配置source map的引用，浏览器会自动匹配同名的map文件。

按照上面的步骤调整后，再重新编译生产环境代码，应该就能在错误信息里看到对应的源码行号了。

内容的提问来源于stack exchange，提问作者LongHike