A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Webpack en modo producci贸n

16/28
Recursos

Aportes 40

Preguntas 20

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸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

<h4>Apuntes</h4>
  • 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()
	]
}

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 鈥淟impia 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 鈥渃ss鈥, lo mismo con los 鈥.js鈥 en la carpeta 鈥渏s鈥 y la 煤ltima que me borre todo en la carpeta 鈥渁ssets鈥
.
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",
  },

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

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,
   },

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,
   },
  • Oscar: 鈥淟as configuraciones son muy simples y amigables鈥

  • Yo: 馃槖

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

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
++

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

module.exports = {
plugins: [
	new CleanWebpackPlugin(),
]
}
<h4>Webpack en modo producci贸n</h4>

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.

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.

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

Yo estaba usando el siguiente script en mi package.json para realizar la misma funci贸n 馃槄

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

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.

Extra帽amente al declarar la constante como
const CleanWebpackPlugin = require(鈥榗lean-webpack-plugin鈥);
Se produc铆a un error al momento de la compilaci贸n.

Modifiqu茅 la declaraci贸n por:
const { CleanWebpackPlugin } = require(鈥榗lean-webpack-plugin鈥);

Y ya se compil贸 satisfactoriamente.

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

No se les olvide el

mode: 'production' ,

En el archivo de config

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

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"
  },

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

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.

Hasta aqui llego mi script para limpiar jaja

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

Vivimos buenos momentos juntos鈥 xD

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 鈥渂asura鈥 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 鈥渃lean鈥 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 鈥減ackage.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 馃槮