title: React + Webpack bundling - if node_modules are excluded 'require is not defined' in browser
body: <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>