React项目编译失败（Webpack相关）求助：剩余7个错误待解决

一、降级Webpack到5之前的版本 #

1. Create React App项目 #

CRA封装了Webpack，需通过降级react-scripts来匹配Webpack 4：

# npm
npm install react-scripts@4.x --save-exact
# yarn
yarn add react-scripts@4.x --exact

安装完成后删除node_modules和package-lock.json/yarn.lock，重新执行npm install或yarn install。

2. 自定义Webpack配置项目 #

直接指定Webpack及配套工具的兼容版本：

# npm
npm install webpack@4 webpack-cli@3 webpack-dev-server@3 --save-dev
# yarn
yarn add webpack@4 webpack-cli@3 webpack-dev-server@3 --dev

同时检查html-webpack-plugin、mini-css-extract-plugin等插件版本，需同步降级到兼容Webpack 4的版本。

二、剩余编译错误的解决方法 #

1. Node.js核心模块缺失错误 #

报错涉及child_process、worker_threads、module、inspector，这些是Node.js后端模块，浏览器环境不存在。在Webpack配置中添加以下配置：

module.exports = {
  resolve: {
    fallback: {
      "child_process": false,
      "worker_threads": false,
      "module": false,
      "inspector": false
    }
  },
  node: {
    child_process: 'empty',
    worker_threads: 'empty',
    module: 'empty',
    inspector: 'empty'
  }
};

false表示不解析该模块，'empty'用空模块替代，避免编译报错。

2. Terser-webpack-plugin依赖缺失错误 #

报错找不到uglify-js、@swc/core、esbuild，这些是压缩器依赖，任选一种方案：

• 安装对应压缩器：

# 选其一即可
npm install uglify-js --save-dev
npm install @swc/core --save-dev
npm install esbuild --save-dev

• 开发环境禁用压缩：
  仅在生产环境启用压缩，修改Webpack配置：

module.exports = {
  optimization: {
    minimize: process.env.NODE_ENV === 'production',
    minimizer: []
  }
};

• 降级terser-webpack-plugin：
  安装兼容Webpack 4的版本：

npm install terser-webpack-plugin@4 --save-dev

3. Critical dependency警告 #

这类警告因动态require导致Webpack无法静态分析，可通过以下方式处理：

• 降级jest-worker到兼容版本：

npm install jest-worker@26 --save-dev

• 忽略警告（不影响编译时可选）：

module.exports = {
  ignoreWarnings: [
    /Critical dependency: the request of a dependency is an expression/
  ]
};

4. Source-map-loader解析警告 #

Webpack内部source map文件缺失，添加忽略规则：

module.exports = {
  ignoreWarnings: [
    /Failed to parse source map from.*\[url\]/
  ]
};

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