无法让webpack-dev-server（webpack）在Chrome Dev Tools中生成源图

Question

这在过去使用手动webpack对我有用，但对于任何反应项目现在我似乎无法使用webpack-dev-server在dev工具中获取源图，无论我使用什么配置。香港专业教育学院尝试了几个devtools值，包括'source-map'。我只是看到“将文件添加到工作区”而不是“检测到源图” - 任何想法？

chrome版本53.0.2785.143（64位）（mac）

• 开发者工具实验标志已启用

  • 

webpack版本1.13.2 webpack.config.js

/* eslint-disable */
const path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'inline-source-map', 
  entry: './app.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/,
      include: __dirname
    }]
  },
}

Answer 1

终于想出来了 - 结果证明这是一个babel loader配置问题。将一个查询参数添加到babel加载程序块允许我生成源映射：

/* eslint-disable */
const path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: './app.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/,
      include: __dirname,
      //here
      query: {
        retainLines: true,
        cacheDirectory: true
      }
    }]
  },
}