React + Webpack 捆绑 - 如果 node_modules 在浏览器中被排除 'require is not defined'

Question

我正在学习 React 并尝试将其与 Webpack 一起使用，但我面临以下问题：

如果我使用这个 webpack 配置，节点模块不会被排除，捆绑过程需要 20 秒，捆绑包的大小超过 2MB（见下面的 CLI 输出）：

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' },
    ]
  }
}

...

但是，如果我将以下两行添加到我的配置中并使用 nodeExternals，该包会变小并且运行速度很快，尽管它不起作用，因为在浏览器中我收到错误 'Uncaught ReferenceError: require is not defined':

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

我在这里错过了什么？我想浏览器会抛出这个错误，因为在我排除 node_modules 之后，客户端不再存在反应，但是我想 node_modules 不应该被捆绑。请在这里找到我的小项目的回购问题： https://github.com/sznrbrt/messageboard-react

解决方案：

两种不同的方式是通过正则表达式 /node_modules/

为加载程序传递排除或包含选项

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

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

Answer 1

答案是在module.loaders内添加exclude: /node_modules/字段。

添加目标：'node' 表示将此代码打包到 node.js 环境中的运行，其中包含节点特定的全局变量，如 require。这就是它在浏览器中不运行的原因。

React + Webpack 捆绑 - 如果 node_modules 在浏览器中被排除 'require is not defined'

React + Webpack bundling - if node_modules are excluded 'require is not defined' in browser

bundle

reactjs

webpack