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

Question

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

5

当我使用Webpack和React 16打包我的应用程序时，在浏览器中会出现"未捕获的ReferenceError: require未定义"的错误，对于react和react-dom都是如此。引起错误的资源是react.production.min.js和react-dom.production.min.js（来自node_modules/react/cjs）。当我检查这些文件时，我清楚地看到了"require"引用，它们是错误的源头。这在React 15.6.2（或更低版本）中不会发生，因为生产捆绑包中没有任何require调用。似乎Webpack没有转换这些文件，但我不知道为什么。我已经谷歌了很多次，重新阅读了Webpack文档，但我一直找不到答案。我相信这是一个基本的Webpack配置问题，但我就是不明白。我正在使用Webpack 3.6.0。完全相同的项目在React 15.6.2下没有问题（因为这些生产捆绑包没有任何require调用），只有在创建"生产"捆绑包时才会出现问题。在"开发模式"下，我使用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控制着我，而不是我控制它。非常感谢任何建议。

- Howard Burrows

这只是在我创建“生产”包时出现的问题。之前遇到过类似的问题，结果发现需要升级我的浏览器（已经过了2年以上）。 - HoldOffHunger

这是发生在Chrome 61.0.3163.79和Safari 11中的情况。没有尝试过Firefox或Edge...但我不认为这是浏览器问题。捆绑包没有正确构建。 - Howard Burrows

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Howard Burrows · Accepted Answer

我知道这会是一个简单的解决方案：下面这行需要被删除

noParse: /\.min\.js/

从文档中可以看到："防止 webpack 解析与给定正则表达式匹配的任何文件。应忽略那些没有调用 import、require、define 或任何其他导入机制的文件。"

我曾经在某个时候包含了这个规则，不知为何，这就是问题所在，当然很明显。令人惊讶的是你可以盯着某个东西数小时却看不到最显而易见的。