[英]How to update webpack config for a react project created using create-react-app?
I have created a react project using create-react-app.我使用 create-react-app 创建了一个反应项目。 Now I need to update the webpack config, but I don't find the file anywhere.
现在我需要更新 webpack 配置,但我在任何地方都找不到该文件。 Do I need to create this file myself or what is the process?
我需要自己创建这个文件还是过程是什么? I am new to react and not really sure how to proceed from here.
我是新来的反应,不确定如何从这里开始。
No need to run npm run eject
无需运行
npm run eject
Step 1步骤1
npm install react-app-rewired --save-dev
Step 2第2步
Add config-overrides.js
to the project root directory.(NOT./src)将
config-overrides.js
添加到项目根目录。(NOT./src)
// config-overrides.js
module.exports = function override(config, env) {
// New config, e.g. config.plugins.push...
return config
}
Step 3第 3 步
Restart your app.重新启动您的应用程序。 Done
完毕
If you've just created your app using CRA, and haven't made big changes to it, you could use npm run eject
- more about it here如果您刚刚使用 CRA 创建了您的应用程序,并且没有对其进行大的更改,您可以使用
npm run eject
- 更多信息请点击此处
Keep in mind that there is no going back (except by commits, of course) after doing this.请记住,执行此操作后没有回头路(当然,提交除外)。 This will basically provide you with webpack file and other files which are currently 'hidden' in CRA
这基本上会为您提供 webpack 文件和其他目前在 CRA 中“隐藏”的文件
Some critiques and second thoughts about this method here对这里方法的一些批评和重新思考
This might be the right choice for you.这可能是您的正确选择。 This allows you to extend your current webpack without ejecting, or messing up / making too many changes at your project as
npm run eject
will.这允许您扩展您当前的 webpack 而不会像
npm run eject
那样在项目中弹出或弄乱/进行太多更改。 Take a look at the package here在此处查看 package
A great tutorial by Egghead.io using react-app-rewired
here Egghead.io 在此处使用
react-app-rewired
rewired 的精彩教程
Webpack configuration is being handled by react-scripts . Webpack 配置由react-scripts处理。 I assume that you don't want to eject and just want to look at the config, you will find them in
/node_modules/react-scripts/config
我假设您不想弹出并且只想查看配置,您将在
/node_modules/react-scripts/config
中找到它们
webpack.config.dev.js. //used by `npm start`
webpack.config.prod.js //used by `npm run build`
I solved this problem by running a script between yarn install and yarn build.我通过在 yarn install 和 yarn build 之间运行脚本解决了这个问题。 After yarn install the webpack.config.json file is generated, then immediately run a script on Node that modifies it, and then run the build.
yarn install webpack.config.json 文件生成后,立即在 Node 上运行修改它的脚本,然后运行构建。
My code:我的代码:
custom.webpack.config.js 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!')
})
})
So, now do you need to edit the package.json to include this code in the process:那么,现在您是否需要编辑 package.json 以在过程中包含此代码:
"scripts": {
"start": "node custom.webpack.config.js && react-scripts start",
"build": "node custom.webpack.config.js && react-scripts build"
}
Done: :)完毕: :)
You can modify your webpack config or any other node_module using patch-package
https://www.npmjs.com/package/patch-package您可以使用
patch-package
https://www.npmjs.com/package/patch-package修改您的 webpack 配置或任何其他 node_module
Install the version of react-scripts
you want with npm i react-scripts@5.0.0
使用
npm i react-scripts@5.0.0
安装您想要的react-scripts
版本
Then go into node_modules/react-scripts/webpack/webpack.config.js
.然后 go 进入
node_modules/react-scripts/webpack/webpack.config.js
。 Make the changes you need and then npx patch-package react-scripts
进行所需的更改,然后
npx patch-package react-scripts
patch-package
will generate a file in your project root like patches/react-scripts+5.0.0.patch
patch-package
将在您的项目根目录中生成一个文件,例如patches/react-scripts+5.0.0.patch
Add post-install script to package.json
with将安装后脚本添加到
package.json
"scripts": {
"postinstall": "patch-package",
...
}
Now whenever you run npm i
you will automatically get this patch included with the installed library.现在,每当您运行
npm i
时,您将自动获得已安装库中包含的此补丁。
https://www.npmjs.com/package/react-app-rewired https://www.npmjs.com/package/react-app-rewired
Complete answer is:完整的答案是:
How to rewire your create-react-app
project如何重新连接你的
create-react-app
项目
Create your app using create-react-app
and then rewire it.使用
create-react-app
创建您的应用程序,然后重新连接它。
react-app-rewired
For create-react-app 2.x
with Webpack 4:react-app-rewired
对于create-react-app 2.x
:npm install react-app-rewired --save-dev
For create-react-app 1.x
or react-scripts-ts
with Webpack 3:对于使用 Webpack 3
create-react-app 1.x
或react-scripts-ts
:
npm install react-app-rewired@1.6.2 --save-dev
config-overrides.js
file in the root directoryconfig-overrides.js
文件/* config-overrides.js */ module.exports = function override(config, env) { //do stuff with the webpack config... return config; }
like this:像这样:
+-- your-project
| +-- config-overrides.js
| +-- node_modules
| +-- package.json
| +-- public
| +-- README.md
| +-- src
for example:例如:
module.exports = function override(config, env) { // New config, eg config.plugins.push... config.module.rules = [...config.module.rules, { test: /\.m?js/, resolve: { fullySpecified: false } } ] return config }
from:从:
/* package.json */
/* package.json */
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }
To:至:
/* package.json */
/* package.json */
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" }
Note: Do NOT flip the call for the eject script.注意:不要翻转弹出脚本的调用。 That gets run only once for a project, after which you are given full control over the webpack configuration making react-app-rewired no longer required.
对于一个项目,它只运行一次,之后您可以完全控制 webpack 配置,从而不再需要 react-app-rewired。 There are no configuration options to rewire for the eject script.
没有配置选项可以重新连接弹出脚本。
npm start
npm run build
Here I found a simple solution without ejecting and we don't need to install other dependencies like react-app-rewired
.在这里,我找到了一个简单的解决方案,无需弹出,我们不需要安装其他依赖项,例如
react-app-rewired
。 Because If you want to add some loaders or update some configurations we need to update the webpack config of create-react-app
.因为如果你想添加一些加载器或更新一些配置,我们需要更新
create-react-app
的 webpack 配置。
How to do it?怎么做?
node_modules/react-scripts/config/webpack.config.js
. node_modules/react-scripts/config/webpack.config.js
。the line number 600
. the line number 600
。 Note: Here you'll see the following info注意:在这里您将看到以下信息
// "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 Example customer loader for handling svg images
{
test: /\.svg$/,
use: ['@svgr/webpack']
},
That's it而已
Warning: Be careful to change it and put your configuration at the appropriate place that's very important.
警告:小心更改它并将您的配置放在非常重要的适当位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.