Configurar Webpack en un proyecto Create-React-App

1. ¿Qué es create-react-app Webpack en React?
2. Localizar las configuraciones y archivos de Webpack de create-react-app en React
3. Cambiar la configuración de webpack de create-react-app en React

Los paquetes de JavaScript facilitan el proceso de desarrollo al combinar archivos separados en uno. Para los principiantes, los paquetes pueden ser bastante difíciles de configurar.

Cuando el marco React aún estaba en su infancia, hace unos años, la comunidad se dividió entre varios paquetes. El equipo detrás del marco decidió detener esta división y seleccionar una solución preferida. El paquete que eligieron fue webpack, pero lo predeterminado no funciona para algunas personas.

¿Qué es create-react-app Webpack en React?

React tiene un proyecto inicial llamado create-react-app para crear aplicaciones. Una vez instalado, proporciona un entorno con una configuración de paquete web existente.

El proceso de configuración de webpack es un poco complicado. Si no sabe lo que está haciendo, configurar un paquete web llevará una eternidad y podría hacer más daño que bien. Afortunadamente, create-react-app hace todo ese trabajo por ti.

En segundo plano, create-react-app se encarga de todas las herramientas por ti. De esta manera, los desarrolladores de React principiantes e intermedios pueden concentrarse en escribir código en lugar de procesos de configuración complejos.

Localizar las configuraciones y archivos de Webpack de create-react-app en React

Una vez configurado, la carpeta de un proyecto create-react-app contiene muchas otras carpetas. A menos que sepa dónde buscar, encontrar los archivos de configuración para webpack puede ser difícil.

Como primer paso, debe abrir el archivo package.json. Es donde puede encontrar información sobre dependencias y herramientas utilizadas en su aplicación.

Una vez que abra el archivo, desplácese hacia abajo hasta el objeto 'scripts': {}. Puede notar que create-react-app usa una biblioteca llamada react-scripts.

Para ubicar los archivos de configuración para el paquete web, debe ir a la carpeta node-modules y buscar el directorio react-scripts. Dependiendo de la versión de la biblioteca, debe encontrar la carpeta config; esta carpeta incluye todos los archivos de configuración, incluido el de webpack.

Cambiar la configuración de webpack de create-react-app en React

El único inconveniente de la configuración predeterminada de webpack es que hace muchas suposiciones. Algunos desarrolladores de React quieren cambiar la configuración por defecto de webpack de create-react-app.

El proyecto de inicio maneja los módulos externos y las bibliotecas internamente de forma predeterminada, por lo que el archivo package.json aparece limpio.

Este comportamiento predeterminado es útil, pero a veces es mejor mostrar información completa sobre los módulos. Ahí es donde entra en juego npm run eject.

Si ejecuta este comando, la información sobre todos sus módulos estará disponible en package.json. Es necesario ejecutar este comando para editar la configuración de webpack de su aplicación.

A menos que sepa lo que está haciendo, ejecutar npm run eject puede ser bastante arriesgado. Sin embargo, es posible cambiar la configuración de webpack de su aplicación sin expulsarla.

Para hacer esto, puede usar la biblioteca llamada react-app-rewired. Para obtener más información sobre la biblioteca, lea documentos oficiales.