为什么 webpack 为我的客户端代码创建 require('react')答案

【问题标题】：Why does webpack create require('react') for my client-side code为什么 webpack 为我的客户端代码创建 require('react')
【发布时间】：2018-06-27 20:18:41
【问题描述】：

我有以下webpack.config.js：

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

const jsLoader = {
  test: /\.js$/,
  loader: 'babel-loader',
  query: {
    presets: ['env', 'react'],
    plugins: ['babel-plugin-transform-object-rest-spread']
  }
}

const client = {
  entry: ['./app/client.js'],
  output: {
    path: '/public',
    publicPath: '/',
    filename: 'client.bundle.js'
  },
  externals: [nodeExternals()],
  module: {
     loaders: [jsLoader]
  }
}

module.exports = [client]

结果client.bundle.js:

/******/ ([
/* 0 */
/***/ (function(module, exports) {

module.exports = require("react");

在 chrome 中失败了，因为 Uncaught ReferenceError: require is not defined

在我的 client.js 上，我正在导入 react、react-dom、prop-types 和一些 react 组件。

为什么 webpack 对于 react 和 prop-types 会使用 require，而不是像其他需求那样使用 __webpack_require__？

反应@16.2， Webpack@3.10 节点@8.4

谢谢，

【问题讨论】：

如果这是你的生产版本，我不明白你为什么使用webpack-node-externals（这件事让require 变得如此神奇）。它对库很有用，但不适用于捆绑的应用程序。如果您需要在浏览器中运行您的包，那么只需将您的代码与依赖项捆绑在一起。还是我错过了什么？

标签： javascript webpack

【解决方案1】：

所以，

正如 Wostex 所说，我的问题来自节点外部。

当我删除它时，npm build 需要很长时间并且在某些 winston、fs、自述文件等上失败...

似乎我正在使用的自定义记录器模块正在导入不适合浏览器的模块。所以我仍在使用外部，但删除了这个记录器。

【讨论】：