如何为使用 create-react-app 创建的 React 项目更新 webpack 配置？

Question

我使用 create-react-app 创建了一个反应项目。现在我需要更新 webpack 配置，但我在任何地方都找不到该文件。我需要自己创建这个文件还是过程是什么？我是新手，并不确定如何从这里开始。

Answer 1

https://www.npmjs.com/package/react-app-rewired

完整的答案是：

如何重新连接您的create-react-app项目

使用创建您的应用程序create-react-app，然后重新连接它。

1. react-app-rewired 使用create-react-app 2.xWebpack 4安装：

npm install react-app-rewired --save-dev

对于Webpack 3create-react-app 1.x或react-scripts-ts与 Webpack 3 一起使用：

npm install react-app-rewired@1.6.2 --save-dev

2. config-overrides.js在根目录下创建一个文件

/* config-overrides.js */
module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

像这样：

+-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

例如 ：

module.exports = function override(config, env) {
    // New config, e.g. config.plugins.push...

    config.module.rules = [...config.module.rules, 
        {
            test: /\.m?js/,
            resolve: {
              fullySpecified: false
            }
        }
      ]

    return config
}

3. “翻转”npm 脚本中对反应脚本的现有调用以进行启动、构建和测试

从：

/* 包.json */

  "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
}

到：

/* 包.json */

  "scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
   "eject": "react-scripts eject"
}

注意：请勿翻转弹出脚本的调用。对于一个项目来说，它只运行一次，之后你就可以完全控制 webpack 配置，从而不再需要react-app-rewired。没有用于重新连接弹出脚本的配置选项。

4. 启动开发服务器

npm start

5. 构建您的应用程序

npm run build

Answer 2

我通过在纱线安装和纱线构建之间运行脚本解决了这个问题。在yarn install之后，会生成webpack.config.json文件，然后立即在Node上运行修改它的脚本，然后运行构建。

我的代码：
custom.webpack.config.js

const fs = require('fs')

// WebPack.config File
const fileConfig = 'node_modules/react-scripts/config/webpack.config.js'

new Promise((resolve) => {
   fs.readFile(fileConfig, 'utf8', function (err, data) {
      if (err) {
        return console.log(err)
      }
      resolve(data)
   })
}).then((file) => {
    
    let CodeAsString = "Code as String to save"

    let regexCode = /YourCodeRegex}/g

    let result = file.replace(regexCode, CodeAsString)

    fs.writeFile(fileConfig, result, function (err) {
        if (err) return console.log(err)
        console.log('The webpack.config file was modifed!')
    })
})

那么，现在您是否需要编辑 package.json 以在流程中包含此代码：

"scripts": {
    "prestart": "node custom.webpack.config.js",
    "prebuild": "node custom.webpack.config.js",
    "start": "react-scripts start",
    "build": "react-scripts build"
}

完毕！:)

Answer 3

没必要跑 npm run eject

第1步

npm install react-app-rewired --save-dev

第2步

添加config-overrides.js到项目根目录。（不是 ./src）

// config-overrides.js
module.exports = function override(config, env) {
    // New config, e.g. config.plugins.push...
    return config
}

第 3 步

重新启动您的应用程序。完毕

Answer 4

选项 1 - 弹出您的 CRA

如果您刚刚使用 CRA 创建了您的应用程序，并且没有对其进行重大更改，您可以使用npm run eject-在此处了解更多信息

请记住，执行此操作后将无法返回（当然，提交除外）。这基本上将为您提供 webpack 文件和其他当前“隐藏”在 CRA 中的文件

对这里方法的一些批评和重新思考

选项 2 - 重新连接 React 应用程序

这可能是您的正确选择。这允许您扩展当前的 webpack，而不会弹出，或在您的项目中随意更改/做太多更改npm run eject。看看这里的包

Egghead.io 的一个很棒的教程，使用react-app-rewired 这里

Answer 5

Webpack 配置由react-scripts处理。我假设您不想弹出而只想查看配置，您会在中找到它们/node_modules/react-scripts/config

webpack.config.dev.js. //used by `npm start`
webpack.config.prod.js //used by `npm run build`

Answer 6

您可以使用https://www.npmjs.com/package/patch-package修改您的 webpack 配置或任何其他 node_modulepatch-package

react-scripts安装你想要的版本npm i react-scripts@5.0.0

然后进入node_modules/react-scripts/webpack/webpack.config.js. 进行您需要的更改，然后npx patch-package react-scripts

patch-package将在您的项目根目录中生成一个文件，例如patches/react-scripts+5.0.0.patch

将安装后脚本添加到package.jsonwith

"scripts": {
    "postinstall": "patch-package",
    ...
}

现在，每当您运行时，npm i您都会自动获得此补丁，该补丁包含在已安装的库中。