Configuración de Webpack para Producción y Limpieza de Builds

Contenido del curso

Introducción a Webpack

Proyecto inicial

Loaders y Plugins en Webpack

Deploy del proyecto

Herramientas de desarrollo complementarias

Integración básica de React.js

Próximos pasos

28
Configuración y Uso de Webpack con React
00:48 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:08

Configuración de Webpack para Producción y Limpieza de Builds

Curso de Webpack

Clase 16 de 28

Clase 16 / 28

Recursos

¿Cómo preparar un proyecto para producción en Webpack?

Cuando te enfrentas al desafío de preparar tu proyecto para producción, es fundamental garantizar que el código esté limpio y optimizado. Con Webpack, puedes gestionar de manera eficiente tus builds de desarrollo y producción. Veamos cómo llevar a cabo esta tarea de manera efectiva, asegurándote de que tu proyecto cumpla con los más altos estándares.

¿Por qué es importante limpiar el proyecto?

En el desarrollo de aplicaciones, cada compilación puede generar múltiples versiones de tus archivos debido a cambios y actualizaciones constantes. Esto puede conducir a la acumulación de archivos innecesarios, lo que puede complicar el mantenimiento y el despliegue. Al limpiar estos archivos antes de cada build de producción, se asegura que solo se conserve lo esencial para el funcionamiento del proyecto.

¿Cómo instalar y configurar Clean Webpack Plugin?

Para limpiar de manera efectiva tu proyecto antes de cada compilación de producción, el plugin Clean Webpack resulta indispensable. Este plugin elimina archivos innecesarios en la carpeta de distribución, optimizando así el proyecto.

Instalación del plugin:

Primero, abre tu terminal y ejecuta el siguiente comando para instalar clean-webpack-plugin como una dependencia de desarrollo:
```
npm install clean-webpack-plugin --save-dev
```
Configuración del plugin en Webpack:

Una vez instalado el plugin, es hora de configurarlo en tu archivo webpack.config.js. Este es un paso crucial para asegurar que cada build de producción esté limpio.
- Importa el plugin en tu configuración de Webpack:
```
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
```
- Agrega el plugin a la sección de plugins de tu configuración de Webpack:
```
module.exports = {
  // ...otras configuraciones...
  plugins: [
    new CleanWebpackPlugin(),
  ],
};
```
Al hacer esto, garantizas que cada vez que se ejecute un build para producción, se limpia la carpeta de distribución, eliminando archivos de builds anteriores que ya no son necesarios.

¿Cómo ejecutar los builds y verificar resultados?

Con la configuración del plugin completa, es momento de ejecutar los builds y asegurarse de que el plugin funcione como se espera.

Ejecutar el comando de producción:

Ejecuta el siguiente comando en tu terminal para ver el efecto del Clean Webpack Plugin:
```
npm run build
```
Al hacerlo, deberías observar que los archivos innecesarios se eliminan, dejando únicamente lo requerido para la nueva compilación.
Diferenciar entre builds de desarrollo y producción:
- Usa npm run dev para ejecutar el build en modo desarrollo, que normalmente no limpia la carpeta de distribución, permitiendo mantener los archivos generados previamente para depuración.
- Usa npm run build para el modo producción, asegurándote de que el build esté limpio y listo para el despliegue.

¿Qué sigue después de la limpieza del proyecto?

Una vez que tengas tu proyecto limpio y optimizado para cada compilación, estás listo para desplegar un producto más organizado y libre de errores. El siguiente paso natural es implementar un modo de observación automática que te permita detectar cambios en tu proyecto y compilarlo automáticamente. Esto ahorra tiempo y mejora la eficiencia del flujo de trabajo.

Asegúrate siempre de mantener tus herramientas actualizadas y personalizadas según las necesidades de tu proyecto. El mundo del desarrollo siempre está en movimiento, pero con configuraciones adecuadas, estarás preparado para cualquier desafío. ¡Continúa explorando y aprendiendo!

Moises Samuel Urias Moreno

Hace 6 años

Segun la documentación se puede usar solamente clean. :D

https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder

 output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
    clean: true,
   },

Maria Gabriela Rodriguez Cuevas

Hace 4 años

Excelente, gracias por compartir, me funcionó sin necesidad de instalar el plugin. . Pasos para realizarlo (si aun no lo tienes claro):

No es necesario correr en la consola: npm install clean-webpack-plugin -D y tampoco agregar en ++webpack.config.js++ la constante CleanWebpackPlugin.
Si debes agregar en el ++package.json++ en los scripts: --config webpack.config.js como lo indica el profesor:

"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"build": "webpack --mode production --config webpack.config.js",
	"dev": "webpack --config webpack.config.dev.js"
  },

En el archivo ++webpack.config.js++ debes hacer el siguiente cambio: . Antiguo código en ++webpack.config.js++

output: {
	filename: '[name].[contenthash].js',
	assetModuleFilename: 'assets/images/[hash][ext][query]'
   },

Nuevo Código en ++webpack.config.js++ a sustituir en output

output: {
	filename: '[name].bundle.js',
	path: path.resolve(__dirname, 'dist'),
	clean: true,
   },

Solo salvas los cambios y corres en la consola npm run build y listo, se han borrado los archivos indeseables del dist.

Comentarios (76)76 comentarios

Rony Porraz Vargas

Sebastián Buitrago

Leobardo Adrian Diaz Ruiz

Julia Suárez

Jose Miguel Pedraza Mateo

Anibal Fernando Ortega Piedrahita

Hace 5 años

Fernando Quinteros Gutierrez

Yancarlo Urdaneta

raul gallegos hernandez

Daniel Schmidt

Orlando Manuel Mendoza Vargas

Rodrigo Martinez

Luis Felipe Medina Rodriguez

Sergio Andrés Majé Franco

Christian Alvarenga

Carlos Perilla

Yuliam Rivera González

Jose Ever Muñoz Muñoz

Hace 3 años

Miguel Angel Reyes Moreno

Obed Paz

Platzi Team

Andrés Felipe Acevedo Del Rio

Paolo Joaquin Pinto Perez

Andres David Sanchez

Andres Evaristo Ruiz Gonzalez

Leopoldo Martinez

Julian David Toro Medina

Reinaldo Mendoza

Edgar Lopez Arroyo

Andres Gallego

Introducción a Webpack

Curso Avanzado de Webpack para Producción Web

Configuración y uso de Webpack para proyectos JavaScript modernos

Proyecto inicial

Configuración y Uso de Webpack en Proyectos JavaScript

Optimización de Proyectos Web con Webpack para Producción

Configuración básica de Webpack para proyectos JavaScript

Loaders y Plugins en Webpack

Integración de Babel y Webpack para compatibilidad JavaScript

Configuración de HTML-webpack-plugin en Webpack

Configuración de Webpack para CSS y Preprocesadores

Uso de Copy Webpack Plugin para Mover Archivos en Proyectos Node.js

Importación de Imágenes con Webpack Asset Module

Optimización de Fuentes Locales con Webpack

Optimización de Proyectos con Webpack: Minificación y Hashing

Alias en Webpack: Simplifica la Importación de Módulos

Deploy del proyecto

Variables de Entorno en Webpack para Proyectos Seguros

Configuración de Webpack para Modo Desarrollo

Configuración de Webpack para Producción y Limpieza de Builds

Activar Watch Mode en Webpack para Desarrollo y Producción

Despliegue de Proyectos Web con Netlify y GitHub

Herramientas de desarrollo complementarias

Configuración de Webpack Dev Server para Desarrollo Local

Análisis de Dependencias con WebPath Bundle Analyzer

Uso de Source Maps en Webpack para Depuración de Código

Integración básica de React.js

Configuración de Webpack y React desde Cero para Producción

Configuración de Webpack en Proyecto React con Babel y JSX

Configuración de Webpack para Proyectos HTML y Servidor Local

Configurar CSS y SaaS en React con Webpack

Configuración de Webpack para Producción en React

Despliegue de Aplicaciones React en Netlify

Próximos pasos

Configuración y Uso de Webpack con React

Configuración de Webpack para Producción y Limpieza de Builds