Resolví este problema ejecutando un script entre la instalación de hilo y la construcción de hilo. Después de la instalación de yarn, se genera el archivo webpack.config.json, luego ejecute inmediatamente un script en Node que lo modifique y luego ejecute la compilación.

Mi código:
personalizado.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!') }) })

Entonces, ahora necesita editar el paquete.json para incluir este código en el proceso:

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

¡Hecho! :)

Opción 1 - Expulsar su CRA

Si acaba de crear su aplicación usando CRA y no le ha hecho grandes cambios, puede usar npm run eject - más sobre esto aquí

Tenga en cuenta que no hay vuelta atrás (excepto por confirmaciones, por supuesto) después de hacer esto. Básicamente, esto le proporcionará un archivo de paquete web y otros archivos que actualmente están "ocultos" en CRA

Algunas críticas y dudas sobre este método aquí .

Opción 2 - Aplicación React reconectada

Esta podría ser la opción correcta para usted. Esto le permite extender su paquete web actual sin expulsarlo, estropearlo o hacer demasiados cambios en su proyecto como npm run eject . Echa un vistazo al paquete aquí .

Un gran tutorial de Egghead.io usando react-app-rewired aquí

La configuración del paquete web está siendo manejada por react-scripts . Supongo que no desea expulsar y solo desea ver la configuración, los encontrará en /node_modules/react-scripts/config

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

No es necesario ejecutar npm run eject

Paso 1

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

Paso 2

Agregue config-overrides.js al directorio raíz del proyecto. (NO ./src)

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

Paso 3

'Voltear' las llamadas existentes a los scripts de reacción en los scripts npm para iniciar, compilar y probar

 /* 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" }

Etapa 4

Reinicie su aplicación. Hecho

Puede modificar la configuración de su paquete web o cualquier otro módulo de nodo usando patch-package https://www.npmjs.com/package/patch-package

Instale la versión de react-scripts que desee con npm i react-scripts@5.0.0

Luego vaya a node_modules/react-scripts/webpack/webpack.config.js . Realice los cambios que necesita y luego npx patch-package react-scripts

patch-package generará un archivo en la raíz de su proyecto como patches/react-scripts+5.0.0.patch

Agregue un script posterior a la instalación a package.json con

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

Ahora, cada vez que ejecute npm i , obtendrá automáticamente este parche incluido con la biblioteca instalada.

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

La respuesta completa es:

Cómo reconfigurar su proyecto create-react-app

Cree su aplicación usando create-react-app y luego reconéctela.

1. Instale react-app-rewired Para create-react-app 2.x con Webpack 4:

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

Para create-react-app 1.x o react-scripts-ts con Webpack 3:

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

2. Cree un archivo config-overrides.js en el directorio raíz

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

Me gusta esto:

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

por ejemplo :

 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 }

3. 'Voltear' las llamadas existentes a los scripts de reacción en los scripts npm para iniciar, compilar y probar

desde:

/* paquete.json */

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

Para:

/* paquete.json */

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

Nota: NO voltee la llamada para el script de expulsión. Eso se ejecuta solo una vez para un proyecto, después de lo cual se le otorga control total sobre la configuración del paquete web, lo que hace que ya no se requiera react-app-rewired. No hay opciones de configuración para volver a cablear el script de expulsión.

4. Inicie el servidor de desarrollo

 npm start

5. Crea tu aplicación

 npm run build

Aquí encontré una solución simple sin expulsar y no necesitamos instalar otras dependencias como react-app-rewired . Porque si desea agregar algunos cargadores o actualizar algunas configuraciones, debemos actualizar la configuración del paquete web de create-react-app .

Cómo hacerlo ?

1. Vaya a node_modules/react-scripts/config/webpack.config.js .
2. Vaya a the line number 600 .

Nota: Aquí verás la siguiente información

 // "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.

3. Agregue la siguiente línea al cargador de archivos anterior.

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

Eso es todo 🎉🎉

Advertencia: tenga cuidado de cambiarlo y coloque su configuración en el lugar apropiado que es muy importante.