使用 webpack-2 在 chrome 中检测到源映射但未加载原始源

Posted 2023-02-22

【中文标题】使用 webpack-2 在 chrome 中检测到源映射但未加载原始源

【英文标题】：Sourcemaps are detected in chrome but original source is not loaded, using webpack-2

【发布时间】：2017-01-01 22:49:11

【问题描述】：

运行使用 webpack 2 构建的应用程序时，会在 chrome 中检测到源映射，但不会加载原始源。 我正在使用 webpack beta21。

这些文件过去是自动检测的，即当在 webpack js 文件的输出中放置断点时，源视图会跳转到 webpack 的原始源输入。但现在我被这个屏幕卡住了：

配置：

var path = require("path");
var webpack = require("webpack");
var WebpackBuildNotifierPlugin = require('webpack-build-notifier');


const PATHS = 
  app: path.join(__dirname, '../client'),
  build: path.join(__dirname, '../public')
;

module.exports = 


  entry: 
    app: PATHS.app + '/app.js'
  ,
  output: 
    path: PATHS.build,
    filename: '[name].js'
  ,


  devtool: "source-map",
  module: 
    loaders: [
      
        test: /\.js?$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'client'),
        ],
        exclude: /node_modules/

      ,

      
        test: /\.css/,
        loader: "style!css"
      
    ]
  ,
  resolve: 
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
   ,
  plugins: [
    new WebpackBuildNotifierPlugin()
  ]

;

【问题讨论】：

对我来说，这只适用于 inline-source-map。

【参考方案1】：

带有源映射的生成文件不会自动重定向到它们的原始文件，因为可能存在一对多的关系。

如果您看到消息Source Map Detected，原始文件应该已经通过Crl + P出现在侧文件树或文件资源管理器中kbd>。如果您不知道原始文件名，您可以打开源映射文件本身。

源映射路径可以通过//# sourceMappingURL= 注释或X-SourceMap 标头标识：

通过 url 打开源映射并查找原始文件名的 sources 属性：

原始文件应该在源面板中可见：

如果您没有看到消息Source Map Detected

您可以通过右键单击并选择Add Source Map来手动添加外部源映射：

其他资源

如果还是不行，你可以试试Source Map Validator 专门针对 webpack，可以配置devtool 属性

【讨论】：

我尝试添加源地图，但它什么也没做。源映射验证器也无法正常工作。我已尝试使用 mozilla 库并正确解析源映射。

【参考方案2】：

如果您要映射到工作区，则意味着您已经拥有源代码。在源映射中包含源代码会造成不必要的冗余。

请改用nosources-source-map。

【参考方案3】：

Chrome 52 中修复了外部源映射的问题，但看起来你的开发工具集与我的不同，我使用的是：

devtool: '#source-maps'

您是如何构建源代码的？如果您使用-d 运行，它将切换到内联源映射

【讨论】：

加#有什么区别？

“#”控制进入 JS 文件的指令。您可以在旧版浏览器中使用“@”代替：原始源映射规范使用“@”，但这与 IE

一点也不神秘

@ThomasGrainger 记录在哪里？官方文档中没有提到哈希或 at 符号：webpack.js.org/configuration/devtool