Create-react-app v15执行npm run build耗时过长且报错，如何解决？

我之前碰到过完全一样的问题，核心原因是**extract-text-webpack-plugin版本与项目依赖的webpack版本不兼容**，同时版本不匹配也会导致构建过程异常缓慢甚至卡死。下面是具体的解决步骤：

先确认版本不匹配的问题 #

首先执行命令查看当前项目中webpack和extract-text-webpack-plugin的版本：

npm list webpack extract-text-webpack-plugin

如果你用的是yarn：

yarn list webpack extract-text-webpack-plugin

你会发现：

• 如果你是Create React App v1.x（对应react-scripts@1.x），项目默认使用webpack v3；
• 而extract-text-webpack-plugin v4+版本依赖webpack v4新增的getNumberOfModules()方法，这就直接导致了报错。

解决方案1：降级extract-text-webpack-plugin到兼容版本 #

这是最直接的修复方式，不需要升级整个项目的react-scripts：

1. 卸载当前不兼容的版本：

npm uninstall extract-text-webpack-plugin

2. 安装适配webpack v3的稳定版本（推荐v3.0.2）：

npm install extract-text-webpack-plugin@3.0.2 --save-dev

3. 重新执行构建命令：

npm run build

这样不仅能解决报错，构建卡顿的问题也会随之消失。

解决方案2：升级react-scripts到兼容版本 #

如果你的项目允许升级依赖，可以选择把react-scripts升级到v2.x版本（它默认使用webpack v4，和extract-text-webpack-plugin v4天然兼容）：

1. 升级react-scripts：

npm install react-scripts@2.x --save

2. 清理旧依赖并重新安装：

rm -rf node_modules package-lock.json
npm install

3. 再次尝试构建：

npm run build

这个方案不仅能解决当前问题，还能获得CRA后续版本的特性和性能优化。

内容的提问来源于stack exchange，提问作者riseres