Reactで簡単にデバッグして開発できるようにjsファイルをバンドルするwebpackを設定しますか？

Question

私はwebpack用のこの設定を持っていて、bundled_index.jsにいくつかのゴミがあり、Firebugコンソールで正しくデバッグできないことに気付きました。

module.exports = { 
    devtool: '#source-map', 
    entry: [ 
     'babel-polyfill', 
     __dirname + '/app/index.js' 
    ], 
    output: { 
     path: __dirname + '/../../../../app/dist/', 
     filename: 'bundled_index.js' 
    }, 
    module: { 
     loaders: [ 
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", query: {presets: ['es2015-loose', 'react', 'stage-0']} }, 
      { test: /\.css$/, loader: "style-loader!css-loader" } 
     ] 
    } 
}; 

私はこれらのような奇妙な文字列で終わる：

eval("module.exports = function(module) {\r\n\tif(!module.webpackPolyfill) {\r\n\t\tmodule.deprecate = function() {};\r\n\t\tmodule.paths = []; ... 

は私のリアクトコンポーネントのコードを取ると、一つのファイルにそれを置くことになっバンドラありませんか？以前はそれを使用していたことを覚えていますが、アップグレードした後に、これらの奇妙なバンドルjsファイルを作成し始めたと思います。以前のバージョンのwebpackを入手せずにどうすれば正常な動作ができますか？

また、エラーが発生したときにファイルをクリックすると、エラーが発生したjsファイルではなくindex.htmlファイルにリダイレクトされます。

ReferenceError: onTestFunction is not defined 
bundle.js%20line%304511%20%3E%20eval:122:9 

ヒント、ご提案または回答はありますか？

Answer 1

問題は、ソースマップは、Firefoxでデフォルトで無効になっていたということでしたが、クロムのか使用「ツールを開発反応します」。私はabout：configに行き、それを有効にすることでそれを有効にしました。

Answer 2

あなたがインストールする必要がありますが、この設定

devtool:'cheap-source-map', 
devtool: 'cheap-module-source-map' 

more issues