选项1-弹出您的CRA

Question

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

Answer 1

我通过在 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": {
    "start": "node custom.webpack.config.js && react-scripts start",
    "build": "node custom.webpack.config.js && react-scripts build"
}

完成！ :)

Answer 2

选项1-弹出您的CRA

如果您刚刚使用CRA创建了应用，但尚未对其进行重大更改，则可以使用npm run eject-有关here的更多信息

请记住，执行此操作后没有任何回退（当然，除了提交以外）。基本上，这将为您提供webpack文件以及CRA中当前“隐藏”的其他文件

对此方法here的一些批评和第二思考

选项2-已重新连接React App

这可能是您的正确选择。这样一来，您就可以扩展当前的Webpack，而不会像npm run eject那样弹出，弄乱/在项目中进行太多更改。看一下软件包here

Egghead.io的出色教程，使用了react-app-rewired here

Answer 3

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 4

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

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

怎么做？

转到node_modules/react-scripts/config/webpack.config.js。
转到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.

添加以下行到上面的file-loader。

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

就是这样??

<块引用>

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

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

5 个答案:

选项1-弹出您的CRA

选项2-已重新连接React App