使用Webpack的源代码映射时，Chrome中文件中的断点无法被触发。

Question

我在一个源.js文件中设置了一个断点（通过源映射加载），但当我在Chrome DevTools的源选项卡中指向它时，它没有被命中。有时，如果我点击格式化按钮{}，它们会被命中，但这是随机的。

有什么想法吗？

  "devDependencies": {
    "autoprefixer-loader": "^3.1.0",
    "babel-core": "^6.1.20",
    "babel-loader": "^6.1.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-stage-1": "^6.3.13",
    "css-loader": "^0.23.1",
    "material-ui": "^0.14.0",
    "style-loader": "^0.13.0",
    "stylus-loader": "^1.5.1",
    "tape": "^4.2.2",
    "webpack": "^1.12.12",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.1.19",
    "moment": "^2.11.2",
    "normalize.css": "^3.0.3"
  }

webpack：

module.exports = {
  entry: [
    'babel-polyfill',
    './app/app.js'
  ],
  output: {
    publicPath: '/',
    filename: 'dist/main.js'
  },
  debug: true,
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'app'),
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      },
      { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' },
      { test: /\.css$/, loader: 'style-loader!css-loader' }

    ]
  },
  resolve: {
    extensions: ["", ".webpack.js", ".web.js", ".js", ".css",".styl"]
  }
};

- SuperUberDuper

---

可能与 https://github.com/webpack/webpack/issues/2145 相关。 简而言之，请尝试使用 'inline-source-map'。 - Fiddles

Answer 1

这似乎是过去Webpack和Chrome的问题。

临时解决方案是将devtool选项设置为source-map或inline-source-map，但请注意，这会增加编译时间。

自Webpack 3以来，该问题已经得到改善，但问题在于Chrome和Webpack之间的交互以及它们不断变化的代码库。

使用Webpack 3，我成功地使用了以下配置： devtool: 'cheap-module-source-map'

- Paesano2000

Answer 2

开发工具注释

//devtool: 'source-map',

添加到插件

new webpack.SourceMapDevToolPlugin({
        filename: '[file].map',
        include: ['app.js'],
        exclude: ['vendor.js'],
        columns: false
    })

- bORm

---

你能详细说明一下这个东西的作用和原理吗？ - Josh Kelley

如果我正确理解了问题，那就是Chrome在某些情况下无法设置断点，列（默认为true）。当设置为false时，源码映射中的列映射将被忽略，并使用更快的SourceMap实现。 - bORm

可以通过使用 devtool: 'cheap-source-map' 将列设置为 false。 - dan

对我来说，这似乎与 devtool: 'cheap-module-source-map' 给出了相同的结果。 - dan

你怎么知道的？官方文档中没有关于注释掉 devtool 并使用插件的内容。 - Green