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

Question

我使用 create-react-app 创建了一个反应项目。现在我需要更新 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

选项 1 - 退出您的 CRA

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

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

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

选项 2 - React App Rewired

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

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

Answer 3

我通过在 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 4

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

完整的答案是：

如何重新布线你的create-react-app项目

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

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

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

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

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

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

}

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

从：

/* 包.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。没有配置选项可以重新连接弹出脚本。

启动开发服务器

npm start

构建您的应用

npm run build