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

Question

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

Answer 1

无需运行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 步

“翻转”在 npm 脚本中对 react-scripts 的现有调用以进行启动、构建和测试

/* package.json */
"scripts": {
    -   "start": "react-scripts start",
    +   "start": "react-app-rewired start",
    -   "build": "react-scripts build",
    +   "build": "react-app-rewired build",
    -   "test": "react-scripts test",
    +   "test": "react-app-rewired test",
        "eject": "react-scripts eject"
}

第 4 步

重新启动您的应用。完成

Answer 2

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

完整答案是：

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

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

1. 安装react-app-rewired 对于带有 Webpack 4 的 create-react-app 2.x：

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

对于带有 Webpack 3 的 create-react-app 1.x 或 react-scripts-ts：

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

1. 在根目录下创建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
}

1. “翻转”在 npm 脚本中对 react-scripts 的现有调用以进行启动、构建和测试

来自：

/* package.json */

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

收件人：

/* package.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 3

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

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

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

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

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

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

现在，每当您运行 npm i 时，您都会自动将这个补丁包含在已安装的库中。

Answer 4

我通过在 yarn install 和 yarn build 之间运行一个脚本解决了这个问题。 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 5

在这里我找到了一个简单的解决方案，无需弹出，我们不需要安装其他依赖项，如react-app-rewired。因为如果你想添加一些加载器或者更新一些配置我们需要更新create-react-app的webpack配置。

怎么做？

1. 转到node_modules/react-scripts/config/webpack.config.js。
2. 转到the line number 600。

注意：您将在此处看到以下信息

            // "file" loader makes sure those assets get served by WebpackDevServer.
            // When you `import` an asset, you get its (virtual) filename.
            // In production, they would get copied to the `build` folder.
            // This loader doesn't use a "test" so it will catch all modules
            // that fall through the other loaders.
            {
              loader: require.resolve('file-loader'),
              // Exclude `js` files to keep "css" loader working as it injects
              // its runtime that would otherwise be processed through "file" loader.
              // Also exclude `html` and `json` extensions so they get processed
              // by webpacks internal loaders.
              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
              options: {
                name: 'static/media/[name].[hash:8].[ext]',
              },
            },
            // ** STOP ** Are you adding a new loader?
            // Make sure to add the new loader(s) before the "file" loader.

1. 添加下面一行到上面的file-loader。

         // #1 Example customer loader for handling svg images 
            {
              test: /\.svg$/,
              use: ['@svgr/webpack']
            },

就是这样??

警告：小心更改并将您的配置放在非常重要的适当位置。

Answer 6

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 7

选项 1 - 弹出您的 CRA

如果您刚刚使用 CRA 创建了您的应用，并且没有对其进行大的更改，您可以使用 npm run eject - 更多关于它的信息 here

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

对此方法的一些批评和重新思考here

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

这可能是您的正确选择。这允许您扩展您当前的 webpack，而不会像 npm run eject 那样在您的项目中弹出或弄乱/进行太多更改。看看包here

Egghead.io 使用 react-app-rewired here 编写的精彩教程