使用webpack-2在chrome中检测到源映射，但未加载原始源 [英] Sourcemaps are detected in chrome but original source is not loaded, using webpack-2

问题描述

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

When running an application that is built using webpack 2, sourcemaps are detected in chrome but original source is not loaded. I'm using webpack beta21.

这些文件曾经被自动检测到，即当在webpack js文件的输出中放入断点时，源视图将跳到webpack的原始源输入.但是现在我被这个屏幕困住了:

These files used to be detected automatically, ie when a breakpoint was put in the the output from webpack js file, the source view would jump to the original source input to webpack. But now I am stuck with this screen:

config:

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()
  ]

};

推荐答案

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

Generated files with source maps won't automatically redirect to their original files, because there's potentially a 1-to-many relationship.

如果您看到消息Source Map Detected，则原始文件应已经通过 Crl + P 出现在侧面文件树或文件浏览器中kbd>.如果您不知道原始文件名，则可以打开源地图文件本身.

If you see the message Source Map Detected, the original file should already appear on the side file tree or the file explorer via Crl + P. If you don't know the original file name, you can open the source map file itself.

1. 源地图路径可以通过//# sourceMappingURL=注释或X-SourceMap标头标识:

通过url打开源地图，然后为原始文件名寻找sources属性:

Open up the source map via url and look for the sources property for the original file name:

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

The original file should be visible in the sources panel:

如果您不看到消息Source Map Detected

您可以通过右键单击并选择Add Source Map来手动添加外部源地图:

If you don't see the message Source Map Detected

You can manually add an external source map by right clicking and selecting Add Source Map:

• 如果仍然无法解决问题，您可以尝试源地图验证程序
• 对于Webpack，您可以配置 devtool 属性

这篇关于使用webpack-2在chrome中检测到源映射，但未加载原始源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！