reactjs - 如何让 webpack 转换 React 生产文件？

Question

当我使用 webpack 与 React 16 捆绑我的应用程序时，我在浏览器中收到“Uncaught ReferenceError:require is not Defined”(对于react和react-dom)。导致错误的资源是react.Production.min.js和react-dom.Production.min.js(来自node_modules/react/cjs)。当我检查这些文件时，我清楚地看到“需要”引用是错误的根源。 React 15.6.2(或更低版本)不会发生这种情况，因为生产包没有任何 require 调用。看来 webpack 没有转换这些文件，我不知道为什么不转换。我谷歌了又谷歌，重新阅读了 webpack 文档，但我只是两手空空。我确信这是一个基本的 webpack 配置问题，但我只是不明白。我正在使用 webpack 3.6.0。完全相同的项目适用于 React 15.6.2(这似乎很合理，因为这些生产包没有任何 require 调用)。这只是我创建“生产” bundle 时出现的问题。在“开发模式”下，我使用react-hot-loader(版本3.0.0-beta.7)并且没有问题。开发和生产 webpack 配置共享完全相同的 module.rules，即:

config.module.rules = [
  // javascript
  {
    test: /\.jsx?$/,
    use: 'babel-loader',
    include: [path.join(__dirname, '../src/client'), path.join(__dirname, '../src/common')]
  },
];

如何让 webpack 转换 React 生产文件？我很惊讶我是唯一遇到这种情况的人......但有时我觉得 webpack 对我的控制比我对它的控制更多。任何提示将不胜感激。

Answer 1

我知道这将是一个简单的解决方案:需要删除以下行

noParse: /\.min\.js/

来自文档:“防止 webpack 解析与给定正则表达式匹配的任何文件。忽略的文件不应调用 import、require、define 或任何其他导入机制。”

出于某种原因，我在某个时候已经包含了这一点，这当然是显而易见的问题。令人惊奇的是，你可以盯着某个东西几个小时，却看不到最明显的东西。