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

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

工具

我用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

我来解答赞 4 收藏

反馈

2 条解答

打工人馨翼 Lv1

看起来是配置没问题，但有几件事得确认。首先检查下你的服务器是不是正确提供了.map文件，有时候生产环境nginx或者apache没配好，会直接404掉这些map文件。

再一个就是浏览器设置问题，确保开发者工具里启用了source map支持。Chrome的话在Settings - Preferences - Sources里把Enable JavaScript source maps勾上。

另外建议试试用eval-source-map模式代替source-map，虽然打包体积大点但映射效率更高，调试时更稳当。记得清理缓存再试。

如果还不行，可能是路径问题。webpack.config.js里加上output.publicPath: '/'，保证相对路径找得到map文件。这个改完要清下dist目录重新build一遍。

module.exports = {

  mode: 'production',

  devtool: 'eval-source-map', // 改成这个试试

  entry: './src/index.js',

  output: {

    filename: 'bundle.js',

    path: path.resolve(__dirname, 'dist'),

    publicPath: '/' // 加上这个

  }

}

搞定了记得把mode切回production，eval-source-map只适合开发调试。这破玩意折腾起来真够呛，祝你好运。

2026-03-26 22:11

极客文君 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