Webpack打包后Source Map不生效是怎么回事？

景苑 ☘︎ 提问于 2026-02-28 15:21:18 阅读 10

工具

我用Webpack打包项目时开启了source map，但浏览器里调试还是看不到原始代码，只显示bundle.js。明明配置里写了devtool: 'source-map'，也确认生成了.map文件，就是没法映射回源码，这到底啥情况？

我的webpack配置大概是这样的：

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

Loader Webpack

我来解答赞 2 收藏

反馈

1 条解答

极客文君 Lv1

这个问题我之前也踩过坑，配置看起来没问题，但就是映射不上，一般是这样几个原因导致的，你可以逐个排查一下。

第一个最常见，浏览器开发者工具里没开启source map功能。打开Chrome DevTools，点右上角那个齿轮图标进Settings，找到Enable JavaScript source maps这个选项，确保是勾选状态。很多时候就是这个开关没开，折腾半天配置。

第二个是loader层级的问题。如果你用了babel-loader或者其他loader，它们也需要单独开启sourceMap配置，否则到loader那里就断了。babel-loader要这样配：

module: {

  rules: [

    {

      test: /.js$/,

      use: {

        loader: 'babel-loader',

        options: {

          sourceMap: true

        }

      }

    }

  ]

}

第三个是production模式下的压缩插件问题。Webpack4以后生产模式默认用TerserPlugin压缩代码，这个插件默认不生成source map。需要在optimization里显式配置：

optimization: {

  minimizer: [

    new TerserPlugin({

      sourceMap: true

    })

  ]

}

第四个可能是路径问题。确认一下生成的bundle.js最后一行有没有类似//# sourceMappingURL=bundle.js.map这样的注释，没有的话浏览器找不到map文件。另外.map文件要和bundle.js放在同一目录下，或者确保服务器能正确访问到。

还有个坑是devtool选项的值，source-map是生成独立的map文件，构建慢但完整。如果只是开发调试，建议用cheap-module-eval-source-map，构建快很多，虽然映射精度稍差但够用。

基本上就是这几个点，浏览器设置、loader配置、压缩插件配置、文件路径，挨个检查下来基本能解决。

2026-02-28 16:12