• Ahora que ya entiendes lo que son los loaders, es hora de que conozcas los plugins Webpack.
  • Un plugin puede hacer todo lo que no puede hacer un loader. Estos últimos tienen sus limitaciones. Por ejemplo aplicar transformaciones solamente al recursos o dependencia que se va a agregar al dependecy graph.
  • Para otras tareas típicas como minificar código, es donde entran los plugins Webpack.
  • Hay muchísimos disponibles y todos son clases JavaScript, así que hay que instanciarlos con el operador new en nuestra configuración. Cualquier opción del plugin, se le pasa al constructor al instanciar.
  • Igual que hicimos con los loaders, vamos a poner los plugins Webpack a prueba.
  • En la página Web de Webpack dispones de una función búsqueda realmente útil. Por ejemplo podemos buscar la forma de limpiar nuestro directorio de salida con cada compilación buscando "clean". O minificar nuestro código fuente JavaScript, buscando "terser".
  • En nuestro caso usaremos HtmlWebpackPlugin que nos permitirá crear un documento HTML que sirva el bundle y recursos que hemos generado. Piensa que hacer esto a mano en cada compilación es como mínimo tedioso si usamos lo que llamamos substituciones Webpack.
  • Vamos a añadir la sustitución [hash] en nuestra propiedad de salida: filename: "[hash].js".
  • Y ahora instalamos HtmlWebpackPlugin y hacemos uso de él:
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    module.exports = {
    	entry: {...},
    	output: {...},
    	module: {...},
    	plugins: [new HtmlWebpackPlugin()]
    }
  • Y aún con las opciones del plugin por defecto, verás que genera un documento HTML que incluye nuestros recursos.
  • Vamos a añadir la imagen que hemos utilizado al DOM:
    ...
    document.body.appendChild(img);
  • Y al volver a compilar y abrir index.html en el navegador, verás que todo funciona correctamente.
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Curso Webpack en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Aprende Webpack desde cero?

Resuelve todas tus dudas sobre Webpack en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬