Webpack en modo producción

Ya me daba cosa tener muchos archivos en dist

Webpack ahora tiene un flag clean que permite limpiar el output directory https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder, es una buena alternativa para no tener que instalar mas dependencias, aqui hay un issue donde piden deprecar el plugin para que solo se use el flag nativo de webpack https://github.com/johnagan/clean-webpack-plugin/issues/197

🏭 Webpack en modo producción

• Actualmente tenemos el problema de tener varios archivos repetidos los cuales se fueron acumulando por compilaciones anteriores
• Para ello puedes limpiar la carpeta cada vez que hacemos un build, usando clean-webpack-plugin
  • Cabe recalcar que esta característica es mucho más util para la configuración de producción
• Para instalarlo debes correr el siguiente comando:

NPM

npm install -D clean-webpack-plugin

YARN

yarn add -D clean-webpack-plugin

• Para agregarlo a nuestra configuración de webpack agregamos los siguientes cambios a webpack.config.js

...
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
	...
	plugins: [
		...
		new CleanWebpackPlugin()
	]
}

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

https://webpack.js.org/configuration/output/#outputclean

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 💚💚😎👍

Pro tip

En nuestro webpack.config.js

module.exports = {
mode: 'production',
}

En nuestro package.json

"scripts": {
    "build": "webpack --config webpack.config.js",
  },

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. 😄

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

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

• 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:

[https://stackoverflow.com/a/73062492](How to restore deleted git-untracked files in vscode)

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.

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.

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

No se les olvide el

mode: 'production' ,

En el archivo de config

Resumén de la Clase

Webpack En Modo Producción
Importante a tener en cuenta:
webpack.config.dev.js : Desarrollo
webpack.config.js : Producción
El modo de producción.

• Limpiamos nuestro Proyecto:
  1.- instalamos:

npm install clean-webpack-plugin -D 

2.- En el webpack.config.js añadimos:

const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 

3.- En plugins (Debajo de new Dotenv()):

plugins: [
	new Dotenv(),
	new CleanWebpackPlugin()
]

4.- En el package.json > scripts:

"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):https://www.npmjs.com/package/clean-webpack-plugin
++

Pueden incluir la propiedad clean:true en el output y sin instalar nada

  output: {
    ...
    clean: true,
  },

pueden ver la documentacion:
webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder

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: [
    new HtmlWebpackPlugin({
        inject: true,
        template: './public/index.html',
        filename: './index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'assets/[name].[contenthash].css'
    }),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src', 'assets/images'),
          to: 'assets/images'
        }
      ]
    }),
    new DotEnv(),
    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 😅

    "predev": "rm -r ./dist/* || pwd",

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
plugins: [
	new CleanWebpackPlugin(),
]
}

Más facil y sin instalar dependencias solo colocamos el clean true dentro del output
https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder

    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].[contenthash].js',
        publicPath:'/',
        assetModuleFilename: 'assets/images/[hash][ext][query]',
        clean: true
    },

Yo lo hacia a la antigua, eliminar dist y ejecutar run dev 😂

Hasta aqui llego mi script para limpiar jaja

"clear": "rm -r ./dist"

Vivimos buenos momentos juntos… xD

Para aquellos que tengan problemas con los archivos duplicados:

1. Fonts: a la regla del url-loader agreguen type: 'javascript/auto', de la siguiente manera (docs):

   module.exports = {
     ...
     module: {
       ...
       {
         ...
         use: {
   	loader: 'url-loader',
   	....
         },
         type: 'javascript/auto'
       }
   }
   

2. Imágenes: aquí no estoy 100% seguro de mi solución, pero cuando cambias el contenido del output.assetModuleFilename, se duplican los archivos de imágenes (.png para el caso del curso). La solución que he encontrado es no utilizar copy-webpack-plugin, al menos para imágenes, ya que usando asset/resource es suficiente, al menos para webpack 5.

Extrañamente al declarar la constante como
const CleanWebpackPlugin = require(‘clean-webpack-plugin’);
Se producía un error al momento de la compilación.

Modifiqué la declaración por:
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’);

Y ya se compiló satisfactoriamente.

bueno innecesario lo del cleanWebpackPlugin, ahora vamos a usar plugins para todo, hasta para crear una carpeta …

npm i rimraf -D
— package.json —

scripts:[
	"clean": "rimraf ./dist",
	"prod": "npm run clean &&  npx webpack --config webpack.config.prod.js"
]

Webpack en modo producción
Instalamos un plugin para optimizar la compilación u optimizar para disminuir la cantidad de archivos

npm i clean-webpack-plugin -D

Agregamos el plugin en el webpack.config.js de producción

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
 new CleanWebpackPlugin(),
]

En el archivo cambiamos el build del script

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

que raro pq sera que clean webpack plugin lo pasan como un objeto

👌

Genial!! siempre hay un plugin para todo! 😛

Excelente profesor, no se si soy la única pero me disfruto este curso a la vez que aprendo.

En un modo de producción hay que mantener la carpeta dist lo más limpia posible de los archivos que hemos estado generando con cada build, para esto hay que instalar un nuevo plugin llamado clean-webpack.

Lo instalamos con el comando npm install clean-webpack-plugin -D.

Con este plugin podremos limpiar la carpeta dist de los archivos anteriores que contenía cada que hagamos una nueva build.

La configuración de Webpack solo se debe hacer en el archivo para producción.

La configuración consiste en crear una variable importando el plugin y agregando una nueva instancia con la variable en la sección de plugins, no recibe ninguna configuración.

A mi me salia error al momento de hacer, npm run build,
pero se soluciono cerrando la consola y volviendo a abrir la misma.

Vamos a configurar nuestro archivo para tener todo listo en cada build.

En modo de produccion vamos a dejar todo lo que ya tenemos, solo vamos a agregar unas cosas para poder limpiar nuestro proyecto, ya que tenemos varias versiones de nuestro codigo, entonces cada que hagamos un compilado para produccion queremos estar seguros de que todo esta limpio, para esto necesitamos un plugin que se llama Clean-Webpack

npm install clean-webpack-plugin-D

Ahora iremos a nuestro archivo de configuracion que solo sera en el webpack y no en el modo desarrollo. Entonces agregaremos una constante que sera un objeto:

const { CleanWebpackPlugin } = require ('clean-webpack-plugin');

Ahora vamos a agregar este plugin a la seccion de plugins:

new CleanWebPackPlugin(),

Ahora al igual podemos validar que en el package.json siempre se ejecute el archivo de producion con:

"build": "webpack --mode producction --config webpack.config.js"

Y ya cada que hagamos una preparacion para desarrollo se limpiara este, pero cada vez que hagamos un build con modo dev se creara un nuevo archivo con su hash

En modo producción podemos limpiar para que este listo en cada build, con cara compilación nos aseguramos de tener los archivos más actualizados y eliminar los duplicados.

npm install clean-webpack-plugin -D

webpack.config.js ⇒ Nuestra configuración de webpack.config.js se mantiene

...
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
...
plugins = [
	new Dotenv(),
	new CleanWebpackPlugin(),
]

package.json

// antes
"build": "webpack --mode production",
// después
"build": "webpack --mode production --config webpack.config.js",

npm run build

Hola. Pregunta… porque se trae como elemento { CleanWebpackPlugin } ? Cuál e sla diferencia?

Genial me gusto mucho el funcionamiento del plugin

I am sensing a palpable sense of confusion within me as I grapple with the unfamiliar concepts and perplexing commands. Regrettably, I find myself unable to discern their utility or purpose of most of the commands. My tutor advises me to seek recourse in alternative courses or modules when confronted with such challenges, yet I remain mired in this disorienting morass of information, which strikes me as overwhelmingly convoluted and repellent.

Una forma alternativa de terminar la configuración del mode productión y alineada con la configuración del mode dev que realizó el profe en la clase anterior es la siguiente:

En lugar de definir el script de build en package.json como:

"build": "webpack --mode production --config webpack.config.js"

lo vamos a definir así:

"build": "webpack --config webpack.config.js"

Y en nuestro archivo de webpack.config.js vamos a agregar el

"mode": "production" 

luego del entry y el output.

¡webpack está roto!

Como cuando le das limpiar papelera, jaja,. Okno, que mal ejemplo :v

Con esto dile adiós a la instalación de clean

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

Instalar el plugin para limpiar el dist

npm i clean-webpack-plugin -D

Me salieron un monton de errores, primeramente que no encontraba el modulo css minimizer, lo tuve que reinstalar luego no encontraba el dotenv lo tuve que reinstalar y luego que el modulo clean no era un constructor.
Al final todo se resolvió cancelando todo y agragando en el
output
clean:true
como recomendaron en los aportes .

La clase está totalmente obsoleta !
Aunque sirve por lo menos para practicar.
jajaja.

Se puede hacer lo mismo haciendo agregando una propiedad

 clean: true,

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

Quite del webpack.config.js estas líneas:

new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, "src", "assets/images/"),
                    to: "assets/images"
                }
            ]
        }),

Ya no tienen sentido.

Importante que antes de llevar el código a producción, es muy conveniente hacer la limpieza de la posible “basura” que tengamos para no llevarla a producción y el código que se lleva sea lo mas limpio posible.

Web pack modo producción

Limpia nuestro proyecto, instalamos el plugin webpack-cli

npm install clean-webpack-plugin -D

Vamos nuestro archivo webpack.config.js y agregamos el plugin

// En la cabecera
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

// En la seccion de plugins de nuestro archivo 
new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "src", "assets/images"),
          to: "assets/images"
        }
      ]
    }),
    new Dotenv(),

// Plugin 
    new CleanWebpackPlugin(),
  ],

En estre curso todo me ha funcionado perfecto, Felicitaciones al profe y al equipo que preparó éste curso.

16.-Webpack en modo producción

.
Ahora veremos las configuraciones de este modo y como limpiar el proyecto para dejarlo listo en cada build.

• La configuración inicial se mantiene.

• Le vamos a añadir algo que nos va a permitir limpiar el proyecto, específicamente las versiones que se generan en el dist. Garantizando tener siempre la última versión cada vez que ejecutemos el comando. Esto se puede hacer de dos maneras:

  1.-Usando una dependencia.

  La instalamos

  npm install clean-webpack-plugin -D
  

  La configuramos solo en la config de webpack, no en el de desarrollo.

  const {CleanWebpackPlugin} require ('clean-webpack-plugin');
  //////////////////////////////
  plugins: [
      new CleanWebpackPlugin(),
    ],
  

  2.-Usando el flag “clean” que proporciona webpack, que nos libera de tener que instalar más dependencias.

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

• Ahora en “package.json” modificamos de “-mode production” a:

"scripts": {
    "build": "webpack --config webpack.config.js"
  },
//Así ya tenemos la estructua que nos permite trabajar con modo desarrollo. 

.
Agradecimiento a la compañera Julia por el aporte del flag en webpack, también dejo la documentación.

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

Cuidado al desestructurar el objeto, yo coloqué CleanWebPackPlugin y me lanzaba error 😦