无法在 Chrome Dev Tools 中获取 webpack-dev-server (webpack) 以生成源映射

Question

这在过去使用手动 webpack 对我有用，但是对于现在的任何反应项目，无论我使用什么配置，我似乎都无法使用 webpack-dev-server 在开发工具中获得源映射。 我尝试了几个 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 加载器配置问题。 将查询参数添加到 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
      }
    }]
  },
}