Konfigurieren von Webpack zum Bündeln von js-Dateien für einfaches Debuggen und Entwickeln in React?

Question

Ich habe diese Konfiguration für Webpack und ich habe festgestellt, dass es in bundling_index.js etwas Müll produziert, der mich daran hindert, mit der Firebug-Konsole richtig zu debuggen.

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" } 
     ] 
    } 
}; 

ich am Ende mit seltsamen Zeichenkette wie diese:

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

Ist das nicht der Bündler den Code in meinen React Komponenten und es in einer einzigen Datei setzen nehmen sollte? Ich erinnere mich, dass es das früher gemacht hat, aber ich denke, nach dem Upgrade hat es angefangen, diese seltsamen gebündelten js-Dateien zu produzieren. Wie kann ich das normale Verhalten haben, ohne eine frühere Version von webpack zu bekommen?

Wenn ich auf die Datei klicke, wenn es einen Fehler gibt, leitet es mich zu einer index.html-Datei statt der js-Datei um, wo der Fehler ausgelöst wurde.

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

Jeder Tipp, Vorschlag oder Antwort?

Answer 1

Das Problem war, dass Quelle-Karte auf Firefox standardmäßig deaktiviert wurde. Ich habe es aktiviert, indem ich zu: config gehe und es aktiviere.

Answer 2

sollten Sie installieren „reagieren Werkzeug entwickeln“ von Chrom oder diese Einstellung verwenden

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

more issues