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

Question

运行使用 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()
  ]

};

Answer 1

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

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

1. 源映射路径可以由//# sourceMappingURL=注释或X-SourceMap标题标识：

   

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

   

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

   

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

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

其他资源

• 如果这仍然不起作用，您可以尝试使用Source Map Validator
• 特别是对于 webpack，您可以配置devtool属性

Answer 2

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

改为使用nosources-source-map。

Answer 3

外部源映射的问题已在 Chrome 52 中修复，但看起来您的开发工具设置与我的不同，我使用：

devtool: '#source-maps'

你是如何构建你的源的？如果您正在使用-d它将切换到内联源映射