Javascript 无法让webpack开发服务器(webpack)在Chrome开发工具中生成sourcemap

Javascript 无法让webpack开发服务器(webpack)在Chrome开发工具中生成sourcemap,javascript,google-chrome,webpack,webpack-dev-server,Javascript,Google Chrome,Webpack,Webpack Dev Server,这在过去使用手动webpack对我很有效,但是现在对于任何react项目,我似乎都无法在使用webpack开发服务器的开发工具中获得sourcemap,无论我使用什么配置。我尝试了几个devtools值,包括“源地图”。我只是看到“将文件添加到工作区”而不是“检测到sourcemap”-有什么想法吗 chrome版本53.0.2785.143(64位)(mac) 已启用“开发人员工具”标记 网页包版本1.13.2 webpack.config.js /* eslint-disable

这在过去使用手动webpack对我很有效,但是现在对于任何react项目,我似乎都无法在使用webpack开发服务器的开发工具中获得sourcemap,无论我使用什么配置。我尝试了几个devtools值,包括“源地图”。我只是看到“将文件添加到工作区”而不是“检测到sourcemap”-有什么想法吗

chrome版本53.0.2785.143(64位)(mac)

  • 已启用“开发人员工具”标记

网页包版本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
    }]
  },
}

最终解决了这个问题-原来这是一个babel loader配置问题。将查询参数添加到babel loader块允许我生成源映射:

/* 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
      }
    }]
  },
}