Webpack

Antes de instalar Webpack es necesario comprobar si tenemos NodeJS instalado en el sistema.

Desde Webpack 4 no es necesario instalar Webpack en un proyecto para hacerlo funcionar, sin embargo, en la práctica es casi imprescindible, ya que cada lugar donde quieras usar Webpack tiene unas características y por ello normalmente lo vas a necesitar configurar.

Para instalar Webpack lo normal es hacerlo en el proyecto en concreto donde se deba usar, pudiendo tener una versión de Webpack, dependencias y configuraciones de manera independiente.

En Webpack 5 puedes instalar el software en el proyecto con los comandos siguientes comandos:

Entramos en el directorio del proyecto.

cd carpeta-del-proyecto

Por supuesto, el proyecto necesita haberse iniciado con npm, es decir, requiere contener ya el archivo package.json. Si no está el archivo package.json, dentro de la carpeta del proyecto hay que hacer este comando:

npm init -y

Luego instalamos los paquetes mínimos para trabajar con Webpack.

npm install webpack webpack-cli --save-dev

A partir de Webpack 4 podemos usar Webpack sin requerir ningún archivo de configuración. Para ello debemos adaptarnos a la convención, creando una estructura con la carpeta "src" y dentro un archivo "index.js".

src
|
|--index.js

Entonces lanzamos el comando siguiente:

npx webpack

Esto producirá la compilación del archivo index.js y colocará el compilado en la carpeta "dist". Acabaremos con dos directorios, el "src" con el archivo original y el directorio "dist" con el archivo resultante de la compilación.

El archivo webpack.config.js sirve para indicar la configuración que deseamos aplicar en la ejecución de Webpack. Si queremos modificar el modo con el que Webpack se ejecuta y prepara los assets de la aplicación, necesitamos crear el archivo en la raíz del proyecto, en la misma carpeta donde está el package.json.

Básicamente en este archivo tenemos que indicar, mediante código Javascript que se ejecutará en la plataforma NodeJS, un objeto de configuración con una serie de propiedades opcionales. Cada propiedad que indiquemos sobreescribirá la configuración predeterminada del proceso de ejecución de Webpack.

El código básico con el que podemos comenzar a usar el Webpack config incluye dos propiedades:

• input, que indica dónde está el Javascript que da inicio a la aplicación. Es el archivo que importa todos los demás módulos Javascript que componen el código del proyecto.
• output, que es la carpeta donde deseamos que Webpack coloque los archivos resultado de su ejecución.

Un ejemplo de webpack.config.js lo podemos ver a continuación:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Podemos encontrar más información en este artículo sobre webpack.config.js, o por supuesto en la documentación de Webpack.

Una vez hemos instalado Webpack y hemos creado el archivo de configuración si fuera necesario, que habitualmente sí lo será, es importante crear los scripts de npm necesarios para lanzar el proceso de trabajo con Webpack.

Estos scripts los creas en el archivo package.json, en la propiedad "scripts". Generalmente crearás dos scripts, uno para ejecutar Webpack en modo desarrollo y otro para ejecutar en modo producción.

"scripts": {
    "build": "webpack --mode production",
    "dev": "webpack --mode development"
},

Luego, invocarás estos scrips con "npm run" seguido del nombre del script que quieras lanzar. En el caso del modo de producción sería el comando.

npm run build

Para modo de desarrollo ejecutaremos:

npm run dev

HTML Webpack Plugin es uno de los plugins más usados de Webpack. Sirve para generar un archivo HTML donde se inyectará el script Javascript creado por Webpack. Es decir, usando HTML Webpack Plugin, al hacer el proceso de bundelización, se creará también como salida un archivo .html que tendrá una etiqueta <script> con el archivo de JS compilado.

Para usar HTML Webpack Plugin tenemos que instalarlo aparte.

npm install html-webpack-plugin --save-dev

Posteriormente lo tenemos que usar en el archivo webpack.config.js, importando con el require y declarando el plugin en el array de plugins.

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

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            hash: true,
        })
    ]
}

Encuentra más información en el artículo de HTML Webpack Plugin.