¿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:
npminstall 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.
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!
A partir de WebPack 5.20.0 + no es necesario instalar el Clean-webpack-plugin. Con colocar en el output clean: true siempre limpiará el directorio antes
++SUPER TIP:++ Aquí les tengo una solución a un incoveniente que tuve y que seguro muchos de ustedes van a tener...
.
Yo configuré mi webpack.config para que mi output saliera ordenado en carpetas especificas. El problema es que sin una configuración adicional el clean-webpack-plugin sólo limpia los archivos javascript si se configura este output de manera especifica.
.
Aquí les dejo una captura del output de dist:
.
Ok, para hacer que se limpie todo y no solo los archivos javascript debemos indicárselo al plugin de forma explícita en un atributo del objeto que se le pasa. El atributo se llama cleanOnceBeforeBuildPatterns lo que significa en español "Limpia una vez despues de cada build".
.
Este atributo es un arreglo, y se le pasan la rutas que queremos que sean limpiadas de esta manera:
.
.
Usando path.resolve con el directorio que se quiere limpiar. En este caso le estoy pasando 3 rutas, una que me borre todos los archivo ".css" en la carpeta "css", lo mismo con los ".js" en la carpeta "js" y la última que me borre todo en la carpeta "assets"
.
Por último el atributo verbose: true lo que hace es darme un log en la consola diciéndome todos los archivos que fueron limpiados antes del build.
.
Espero que les haya sido de mucha ayuda este TIP 💚💚😎👍
Por favor ignoren el index.html que está en el root del proyecto, no sé por qué estaba ahí jajaja 😅🥴😅
Que buena información sacarle el mayor provecho a este plugin.
En Webpack 5 ahora tiene un atributo clean en output que funciona de la misma forma que el plugin, pero sin tener que instalar nada, se establece de la siguiente manera:
output:{clean:true}
con eso limpiará la carpeta del output automáticamente antes de generar un nuevo bundle
Segun la documentación se puede usar solamente clean. :D
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++
Solo salvas los cambios y corres en la consola npm run build y listo, se han borrado los archivos indeseables del dist.
Oscar: "Las configuraciones son muy simples y amigables"
Yo: 😒
No usen clean-webpack-plugin. En mi caso me borró el proyecto que estaba realizando 😓
En otros comentarios dan mejores alternativas, el plugin esta deprecado y es peligroso (leí de casos peores al mío).
Si les pasa algo similar, y están trabajando con VS Code, les traigo una solución razonable:
Básicamente es crear el archivo, con el mismo nombre y ubicación en vs-code, mirar la línea de tiempo (timeline), y restaurar la ultima versión guardada.
El plugin puede llegar a borrar incluso la carpeta .git, no lo usen, enserio, no es necesario, hay mejores alternativas.
suena peligroso 😧
T0T
Webpack en modo producción
Usaremos un plugin de webpack para limpiar nuestro proyecto de archivos no necesarios, usando npm i clean-webpack-plugin -D
Así nuestros proyectos estarán listos para el modo de producción.
Yo lo que hacia es que eliminaba toda la carpeta dist antes de correr el comando de nuevo, y simplementa me generaba una nueva xd
Sin embargo, al parecer hoy en dia tenemos bastante manejo de lo que es el output, pudiendo estabelcer la propiedad clean en true, y eso nos genera la buena practica de limpiar nuestra carpeta dist sin necesidad de instalar otras dependencias.
"build":"webpack --mode production --config webpack.config.js"
Gurdamos y ejecutamos:
**Debemos abrir la carpeta dist(distribution) para ver reflejados los CAMBIOS
**
npm run build
++CLEAN WEBPACK PLUGIN (Documentación):
++
Pueden incluir la propiedad clean:true en el output y sin instalar nada
output:{...clean:true,},
pueden ver la documentacion:
Y yo borrando la carpeta dist cada cierto tiempo XD
Ahora hay 2 maneras de limpiar nuestros dist la primera (y a mi parecer la más fácil) es:
En el archivo webpack.config.js vamos a buscar el apartado de output y colocaremos la siguiente línea clean: true
quedando de esta manera:
...output:{path: path.resolve(__dirname,"dist"),filename:"[name].[contenthash].js",assetModuleFilename:'assets/images/[hash][ext][query]',clean:true//<--- Esta Linea!!!},...
La otra manera es colocar un import de webpack (lo trae por defecto y con los snipets de VSC lo agrega automáticamente, pero para efectos de explicar, lo declarare de manera explícita).
const{CleanPlugin}=require("webpack");// Al Principio como todos los require //
luego en la seccion de plugins colocaremos esto
plugins:[newHtmlWebpackPlugin({inject:true,template:'./public/index.html',filename:'./index.html'}),newMiniCssExtractPlugin({filename:'assets/[name].[contenthash].css'}),newCopyPlugin({patterns:[{from: path.resolve(__dirname,'src','assets/images'),to:'assets/images'}]}),newDotEnv(),CleanPlugin()//<--- Esta es la linea],
Listo, cualquiera de las 2 maneras funciona
Yo estaba usando el siguiente script en mi package.json para realizar la misma función 😅
