webpack-dev-server（webpack）を使用してChrome Devツールでソースマップを作成することはできません

Question

これは過去に手動webpackを使用していましたが、反応プロジェクトのためにdevtツールでsourcemapを取得するようですwebpack-dev-serverはどんな設定でも使用できます。 iveは 'source-map'を含むいくつかのdevtools値を試しました。私は 'sourcemap detected'の代わりに 'workspaceにファイルを追加する'と表示しています。

クロムバージョンバージョン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ローダーブロックにクエリパラメータを追加すると、私はソースマップを作成することができました：

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