Configuración de Webpack para Desarrollo y Producción en React

Curso de Webpack con Express.js, React.js y TypeScript

Contenido del curso

Introducción

Webpack en el Backend

Webpack en el Frontend

Despliegue

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:00

Configuración de Webpack para Desarrollo y Producción en React

Curso de Webpack con Express.js, React.js y TypeScript

Clase 8 de 22

Clase 8 / 22

Recursos

Preparar un proyecto de React para que funcione tanto en modo desarrollo como en modo producción requiere separar las configuraciones de webpack en archivos independientes y aplicar optimizaciones específicas. Aquí se explica paso a paso cómo crear ambas configuraciones, instalar los plugins necesarios y verificar que todo funcione correctamente.

¿Cómo crear la configuración de desarrollo en webpack?

El primer paso es crear un archivo llamado webpack.config.dev.js [00:18]. Se toma como base la configuración principal del proyecto y se copia en este nuevo archivo. La diferencia clave está en la sección devServer, donde se definen tres propiedades fundamentales:

contentBase: utiliza path.join(__dirname, 'dist') para indicar dónde se encuentra el contenido del proyecto [00:35].
compress: se establece en true para activar la compresión del proyecto durante el desarrollo [00:55].
port: se asigna el puerto 3005, en lugar del puerto por defecto que suele ser 3000 u 8080 [01:01].

Con estas tres líneas, la configuración de desarrollo queda lista para servir el proyecto localmente con recarga automática.

¿Qué plugins se necesitan para optimizar la configuración de producción?

Para la configuración de producción se requieren tres plugins que se encargan de optimizar y limpiar el proyecto antes del despliegue [01:15]:

terser-webpack-plugin: optimiza y minimiza el código JavaScript.
clean-webpack-plugin: limpia la carpeta dist cada vez que se genera un nuevo build, evitando archivos residuales.
css-minimizer-webpack-plugin: minifica los archivos CSS para reducir su peso.

La instalación se realiza con un solo comando en la terminal [01:40]:

bash npm install terser-webpack-plugin clean-webpack-plugin css-minimizer-webpack-plugin -D

La bandera -D indica que son dependencias de desarrollo, ya que solo se utilizan durante el proceso de construcción.

¿Cómo se integran los plugins en la configuración?

Una vez instalados, se importan en el archivo de configuración de producción mediante require [02:10]:

javascript const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin');

Dentro de la sección plugins, se crea una nueva instancia de CleanWebpackPlugin sin parámetros adicionales [03:05]:

javascript plugins: [ new CleanWebpackPlugin(), ]

¿Cómo se configura la sección de optimization?

Se agrega un bloque llamado optimization donde se activan las opciones de minimización [03:15]:

javascript optimization: { minimize: true, minimizer: [ new CssMinimizerPlugin(), new TerserPlugin(), ], }

Este arreglo dentro de minimizer recibe las instancias de los plugins que se encargan de comprimir tanto el CSS como el JavaScript. Esta misma estrategia se aplica en proyectos puros de webpack y ahora se traslada al proyecto con React [03:40].

¿Cómo se actualizan los scripts en package.json?

Para que cada comando utilice la configuración correcta, se modifican los scripts en el archivo package.json [03:55]:

{ "scripts": { "build": "webpack --mode production --config webpack.config.js", "start": "webpack serve --open --mode development --config webpack.config.dev.js" } }

El script build ejecuta webpack en modo producción con la bandera --config apuntando a webpack.config.js.
El script start levanta el servidor de desarrollo usando webpack serve --open y apunta a webpack.config.dev.js.

Al ejecutar npm run start, el proyecto se abre automáticamente en el puerto 3005 configurado previamente [04:25]. Al ejecutar npm run build, webpack genera el bundle optimizado dentro de la carpeta dist, donde se puede verificar que el JavaScript está minimizado y el CSS comprimido [04:50].

Estas optimizaciones son esenciales para que el proyecto funcione de forma eficiente en producción. ¿Ya aplicas estas separaciones de configuración en tus proyectos? Comparte tu experiencia y dudas en los comentarios.

Karen Gómez

Hace 5 años

Me sale este error, ya revise los archivos de package.json y los 2 webpack y estan tal cual los tiene Oscar. Ayuda!!!

$ npm run build

> platzi-store@1.0.0 build H:\Platzi\Escuela de Desarrollo Web\Curso Práctico de Webpack\Project\platzi-store
> webpack --mode production --config webpack.config.js

assets by status 169 KiB [cached] 3 assets
Entrypoint main = assets/main.css bundle.js
orphan modules 162 KiB [orphan] 56 modules
runtime modules 884 bytes 4 modules
cacheable modules 309 KiB (javascript) 2.17 KiB (css/mini-extract)     
  javascript modules 309 KiB
    modules by path ./node_modules/prop-types/ 2.58 KiB 3 modules      
    modules by path ./node_modules/react/ 6.48 KiB 2 modules
    modules by path ./node_modules/react-dom/ 119 KiB 2 modules        
    modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules       
    modules by path ./node_modules/react-is/ 2.69 KiB 2 modules        
  modules by path ./src/styles/components/ 2.17 KiB 6 modules

ERROR in assets/main.css
assets/main.css from Css Minimizer
Error: PostCSS plugin postcss-discard-comments requires PostCSS 8.     
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users        
    at Processor.normalize (H:\Platzi\Escuela de Desarrollo Web\Curso Práctico de Webpack\Project\platzi-store\node_modules\postcss\lib\processor.js:167:15)
    at new Processor (H:\Platzi\Escuela de Desarrollo Web\Curso Práctico de Webpack\Project\platzi-store\node_modules\postcss\lib\processor.js:56:25)
    at postcss (H:\Platzi\Escuela de Desarrollo Web\Curso Práctico de Webpack\Project\platzi-store\node_modules\postcss\lib\postcss.js:55:10) 
    at cssnanoPlugin (H:\Platzi\Escuela de Desarrollo Web\Curso Práctico de Webpack\Project\platzi-store\node_modules\cssnano\dist\index.js:145:31)
    at cssnanoMinify (eval at transform (H:\Platzi\Escuela de Desarrollo Web\Curso Práctico de Webpack\Project\platzi-store\node_modules\css-minimizer-webpack-plugin\dist\minify.js:34:28), <anonymous>:49:33)      
    at minify (H:\Platzi\Escuela de Desarrollo Web\Curso Práctico de Webpack\Project\platzi-store\node_modules\css-minimizer-webpack-plugin\dist\minify.js:15:32)
    at Object.transform (H:\Platzi\Escuela de Desarrollo Web\Curso Práctico de Webpack\Project\platzi-store\node_modules\css-minimizer-webpack-plugin\dist\minify.js:35:24)
    at execFunction (H:\Platzi\Escuela de Desarrollo Web\Curso Práctico de Webpack\Project\platzi-store\node_modules\jest-worker\build\workers\threadChild.js:158:17)
    at execHelper (H:\Platzi\Escuela de Desarrollo Web\Curso Práctico de Webpack\Project\platzi-store\node_modules\jest-worker\build\workers\threadChild.js:137:5)
    at execMethod (H:\Platzi\Escuela de Desarrollo Web\Curso Práctico de Webpack\Project\platzi-store\node_modules\jest-worker\build\workers\threadChild.js:141:5)

webpack 5.48.0 compiled with 1 error in 7431 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! platzi-store@1.0.0 build: `webpack --mode production --config webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the platzi-store@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Nerak\AppData\Roaming\npm-cache\_logs\2021-08-05T22_10_22_328Z-debug.log

Giovanny Moreno Leguizamón

Hace 5 años

Hola, estuve mirando tu error, estuve indagando un poco, prueba con optimize-css-assets-webpack-plugin": "5.0.6", si no... Intenta con la version 5.0.8 en ese nuevo release dicen que ya esta solucionado

Introducción

Migración y Configuración Avanzada de Webpack 5 con TypeScript

Configuración y Optimización de Proyectos con Webpack y TypeScript

Webpack en el Backend

Configuración Básica de Express y Webpack para Proyectos Node.js

Configuración de Webpack para Proyectos con Express

Migración de Aplicaciones Node.js a TypeScript paso a paso

Configuración de API Rest con TypeScript y JSON para Platzi Store

Webpack en el Frontend

Migración y Optimización de Proyectos con Webpack 5

Configuración de Webpack para Desarrollo y Producción en React

Creación de Hooks para Consumo de APIs en React con Axios

"Implementación de Context en React para Gestión de Estado"

Configuración de Alias en Webpack para Proyectos JavaScript

Optimización de Imágenes y Uso de CDN en Proyectos Web

Optimización de Imágenes PNG con Image Minimiser Webpack Plugin

Configuración de TypeScript en React con Webpack

Configuración de Hot Reload en Webpack con React

División de Código con Lazy Loading en React

División de Código con Webpack y Micro Frontend en React

Configuración Avanzada de Webpack para Separar Código y Dependencias

Despliegue

Despliegue de Aplicaciones Web con Netlify y GitHub

Despliegue de API en Heroku con Express y TypeScript

Conexión de un Dominio Personalizado a Netlify y Cloudflare

Migración de Wetpack y Optimización para Producción

Configuración de Webpack para Desarrollo y Producción en React

Progreso del curso

Introducción

Webpack en el Backend

Webpack en el Frontend

Despliegue

Recursos

Recursos