Reagieren + Webpack Bündelung - wenn node_modules ausgeschlossen ist ‚verlangen, ist nicht definiert‘ im Browser

Question

IREACT lerne und ich versuche es mit Webpack zu verwenden, aber ich bin das folgende Problem konfrontiert:

Wenn ich benutze diese webpack Config, haben die Knotenmodule nicht ausgeschlossen bekommen und die Bündelung Vorgang dauert 20 Sekunden und das Bündel der Größe ist über 2Mbs (CLI Ausgabe siehe unten):

const path = require('path'); 
const nodeExternals = require('webpack-node-externals'); 

module.exports = { 
    entry: [ 
    'bootstrap-loader', 
    './src/index.js', 
    'style!css!./src/style/style.css' 
    ], 
    output: { 
    path: path.resolve(__dirname + 'build'), 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { test: /\.jsx?$/, 
     loader: 'babel-loader' 
     }, 
     { 
     test: /\.scss$/, 
     loaders: [ 
      'style', 
      'css?modules&importLoaders=2&localIdentName=[name]__[local]__[hash:base64:5]', 
      'postcss', 
      'sass', 
     ], 
     }, 
     { 
     test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: "url?limit=10000" 
     }, 
     { 
     test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/, 
     loader: 'file' 
     }, 
     // Bootstrap 3 
     { test:/bootstrap-sass[\/\\]assets[\/\\]javascripts[\/\\]/, loader: 'imports?jQuery=jquery' }, 
    ] 
    } 
} 

...

Allerdings, wenn ich die folgenden zwei Zeilen meiner config und Verwendung nodeExternals hinzufügen das Bündel klein und läuft schnell, obwohl es nicht, weil im Browser arbeiten ich den Fehler ‚Uncaught Reference bekommen: erfordern nicht definiert ist ':

... 
    target: 'node', // important in order not to bundle built-in modules like path, fs, etc. 
    externals: [nodeExternals()] 
    ... 

Was bin ich hier? Ich nehme an, dass der Browser diesen Fehler ausgibt, weil react nicht mehr auf der Client-Seite existiert, nachdem ich node_modules ausgeschlossen habe, aber ich nehme an, dass die node_modules nicht gebündelt werden sollten. Bitte, finden die repo meiner kleinen Projekt mit dem Problem hier: https://github.com/sznrbrt/messageboard-react

LÖSUNG:

Zwei verschiedene Möglichkeiten, entweder für den Loader eine Ausnahme oder darunter Option vorbei mit einem regex von/node_modules/

... 
exclude: /(node_modules|bower_components)/, 
... 

    ... 
    { test: /\.js?$/, 
    include: [ 
     path.resolve(__dirname, './src'), 
    ], 
    loader: 'babel-loader?cacheDirectory', 
    }, 
    ... 

Answer 1

Die Antwort ist exclude: /node_modules/ Feld innerhalb module.loaders hinzuzufügen.

Ziel hinzufügen: 'Knoten' bedeutet, dass dieser Code in die node.js-Umgebung geschrieben wird, in der die knotenspezifische globale Variable wie require enthalten ist. Dies ist der Grund, warum es nicht im Browser läuft.