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

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

这些文件过去是自动检测的，即当在 webpack js 文件的输出中放置断点时，源 View 会跳转到 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() 
  ] 
 
}; 

请您参考如下方法:

带有源映射的生成文件不会自动重定向到其原始文件，因为可能存在一对多关系。
如果您看到消息 Source Map Detected ，原始文件应该已经通过Crl + P出现在侧文件树或文件资源管理器中。 如果您不知道原始文件名，可以打开源映射文件本身。

源映射路径可以由 //# sourceMappingURL= 标识评论或 X-SourceMap标题:

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

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

如果您没有看到消息 Source Map Detected您可以通过右键单击并选择 Add Source Map 来手动添加外部源映射。 :

其他资源

如果还是不行，你可以试试 Source Map Validator

对于 webpack，你可以配置 devtool 属性(property)