Aprende Webpack desde cero

Qué son los plugins Webpack

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

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue