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

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

外部源地图的问题已在Chrome 52中修复，但看起来你的devtool设置与我的不同，我使用：

devtool: '#source-maps'

您是如何构建源代码的？如果您使用-d运行，则会切换到内嵌源地图

Answer 3

如果您要映射到工作区，则表示您已拥有源代码。在源映射中包含源代码会产生不必要的冗余。

请改用$(function() { $("#dialog").dialog({ autoOpen: false, buttons: [{ text: "Add", id: "ui-btn-add", class: "add", click: function() { $(btnAdd).click(); $("#ui-btn-add, #ui-btn-search").hide(); $(this).dialog("close"); } }, { text: "Search", id: "ui-btn-search", class: "search", click: function() { $(btnSubmit).click(); $("#ui-btn-add, #ui-btn-search").hide(); $(this).dialog("close"); } }, { text: "Cancel", click: function() { $("#ui-btn-add, #ui-btn-search").hide(); $(this).dialog("close"); } }] }); $("#ui-btn-add, #ui-btn-search").hide(); $("button[id*='opener']").click(function() { console.log($(this)); if ($(this).hasClass("add")) { $("#ui-btn-add").show(); } else { $("#ui-btn-search").show(); } $("#dialog").dialog("open"); }); }); 。