React + Webpack bundling - if node_modules are excluded 'require is not defined' in browser
<p>I'm learning React and I'm trying to use it with Webpack, but I'm facing the following issue:</p>

<p>If I use this webpack config, the node modules don't get excluded and the bundling process takes 20 second and the bundle's size is over 2MBs (see CLI output below):</p>

<pre><code>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&amp;importLoaders=2&amp;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' },
    ]
  }
}
</code></pre>

<p><a href="https://i.stack.imgur.com/JELon.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JELon.png" alt="CLI output 1"></a></p>

<p>...
<a href="https://i.stack.imgur.com/8Xrbp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8Xrbp.png" alt="enter image description here"></a></p>

<p>However, if I add the following two lines to my config and use nodeExternals the bundle becomes small and runs quickly, although its not working because in the browser I'm getting the error <strong>'Uncaught ReferenceError: require is not defined'</strong>:</p>

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

<p><a href="https://i.stack.imgur.com/QujlN.png" rel="noreferrer"><img src="https://i.stack.imgur.com/QujlN.png" alt="enter image description here"></a></p>

<p>What am I missing here? I suppose the browser throws this error, because react doesnt exist on client side anymore after I exclude node_modules, however I suppose the node_modules shouldn't be bundled. 
Please, find the repo of my small project with the problem here:
<a href="https://github.com/sznrbrt/messageboard-react" rel="noreferrer">https://github.com/sznrbrt/messageboard-react</a></p>

<p><strong>SOLUTION:</strong></p>

<p><strong>Two different ways are either passing an excluding or including option for the loader with a regex of /node_modules/</strong></p>

<pre><code>...
exclude: /(node_modules|bower_components)/,
...

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