如何将create-react-app项目编译打包为单个JavaScript文件并解决构建报错？

你遇到的TypeError: this.getOptions is not a function报错，核心原因是css-loader版本和webpack版本不兼容。你当前项目运行的webpack版本为4.44.2，但安装的css-loader是v6.x版本，css-loader从v6版本开始仅适配webpack 5，在webpack4环境下运行会缺失内置方法触发报错。

解决步骤 #

• 第一步：卸载当前高版本css-loader
  执行命令：npm uninstall css-loader
• 第二步：安装适配webpack4的css-loader版本
  执行命令：npm install css-loader@5.2.7 --save-dev
• 第三步：修正webpack.config.js中的css处理规则
  你当前的css规则仅配置了css-loader，缺少style-loader将解析后的样式注入到页面，找到对应配置修改为：

{
  test: /\.css$/,
  use: ["style-loader", "css-loader"]
},

• 第四步：优化构建命令消除警告
  你当前的package.json中build命令先执行react-scripts build再执行webpack打包属于冗余操作，直接修改scripts配置即可，同时添加mode参数消除webpack的mode未配置警告：

"scripts": {
  "start": "react-scripts start",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "build": "webpack --config webpack.config.js --mode production"
},

• 第五步：清理重复配置
  你webpack.config.js中重复配置了三次静态资源（字体、svg、txt等）的loader规则，删除重复的配置项避免规则冲突。

修改完成后重新执行npm run build即可正常打包出单文件。

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