Webpack | Setup III: Plugins

Background.

Retomando la serie de webpack, hoy veremos como instalar y configurar plugins.

Los plugins son el corazón de webpack y no son más que fragmentos de código, que nos permiten extender las capacidades de webpack.

Mediante plugins podemos ejecutar tareas especificas durante la generación de nuestro bundle(paquete): copiar archivos, optimizar código, agregar meta datos, etc.

En este caso en particular usaremos un plugin que nos permite automatizar la generación del archivo HTML (html5) con nuestro bundle ya inyectado: html-webpack-plugin; lo cual es bastante útil al momento de probar nuestro código.

Playground.

demo
|_dist
    |_index.html 
    |_bundle.js // bundle generado

|_ src
    |_components
        |_dom.js
    |_index.js
|_package.json

Recuerda todo el código está disponible aquí, solo basta con que clones el repositorio. El branch sobre el cuál trabajáremos los cambios de este post es: setup-iii

html-webpack-plugin.

Comencemos por instalar el plugin en nuestro proyecto:

npm install -D html-webpack-plugin@4.5.6

Si estas usando webpack 5 puedes instalar el plugin así:

npm install -D html-webpack-plugin

Configuración.

A continuación modificamos webpack.config.js: 

// Cargamos el plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    mode: 'none',
    plugins: [ // Lo registramos
        new HtmlWebpackPlugin()
    ]
}

Procedemos a eliminar el archivo index.html dentro del directorio dist. 

Ahora cada vez que corramos el comando build, html-webpack-plugin creará un archivo nuevo junto con la referencia a nuestro bundle

npm run build

Por default el archivo se creará en el path especificado en output.path de nuestro webpack.config.js, que en nuestro caso apunto al directorio dist/

El ejemplo anterior usa la configuración por defecto, la gran mayoría de los plugins acepta parámetros para modificar dicha configuración y html-webpack-plugin no es la excepción.

Si así lo requerimos podemos especificar un template para generar el html ya sea como un file (template) o una cadena (templateContent)

También podemos especificar el nombre del archivo generado (index.html por default) o incluir un subdirectorio.

Para configurar el plugin basta con que pasemos un objeto con las opciones que queremos cambiar al plugin:

...

new HtmlWebpackPlugin({

    title: 'Webpack demo',

    filename: 'sample.html'

})

Puedes ver la lista completa de opciones aquí

Extra.

Prueba las otras opciones de configuración

clean-webpack-plugin

Este es otro plugin bastante útil ya que borra todos los archivos ubicados en el path especificado por output.path en webpack.config.js

Para instalarlo corremos el siguiente commando:

npm install clean-webpack-plugin -D

El -D flag indica que queremos instalar la dependencia en devDependencies (dependencias sólo requerida durante desarrollo).

Una vez instalado ahora toca cargarlo:

webpack.config.js.

const HtmlWebpackPlugin = require('html-webpack-plugin');
// Cargamos el plugin
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    mode: 'none',
    plugins: [ // Lo registramos
        new CleanWebpackPlugin({
            verbose: true
        }),
        new HtmlWebpackPlugin({
            title: 'Webpack Demo'
        })
    ]
}

npm run build.

Listo, eso es todo por el momento. 

C you space cowboy....