En este artículo vamos a explicar cómo debes compilar el CSS de un proyecto frontend con Webpack 5. Explicaremos el proceso paso a paso, desde la instalación de Webpack. No obstante, los primeros pasos los vamos a ver solo a modo de receta, por lo que si tienes alguna duda o quieres más información te recomendamos que consultes el Manual de Webpack.

En un artículo publicadio anteriormente explicamos cómo compilar CSS y Sass con Webpack 4, sin embargo las cosas en Webpack 5 han cambiado un poco y ahora hay que tener en consideración otros packages.

1.- Instalar Webpack 5

Comenzamos con la instalación de Webpack en tu proyecto. Lo consigues con estos comandos:

npm init -y

Y luego instalas Webpack:

npm install webpack webpack-cli --save-dev 

Este paso nos habrá instalado el propio Webpack y el CLI de Webpack que están en packages separados.

2.- Crear el archivo webpack.config.js

El archivo webpack.config.js es el que dirige cómo debe realizarse la compilación de los archivos mediante Webpack. Lo debes crear en la raíz de tu proyecto, en la misma carpeta donde tienes el package.json.

En este paso simplemente vamos a crear el archivo, luego te indicamos el código que vas a necesitar.

Si quieres crear con el terminal este archivo puedes ejecutar el comando:

touch webpack.config.js

3.- Instalar los loader para CSS

Los loaders de Webpack son los que hacen el trabajo de reconocer el código que estás usando en tu proyecto. Para poder reconocer el código CSS Webpack necesita unos loader determinados.

En este caso vamos a instalar todos los loader para trabajar con tu código CSS. Los instalas todos con el comando siguiente:

npm install --save-dev mini-css-extract-plugin css-loader style-loader

4.- Crear los archivos fuente para la compilación

Ahora vamos a crear los archivos origen, que va a tomar Webpack para compilar el CSS. Estos archivos los vamos a meter en la carpeta "src". Es una práctica habitual, aunque tú podrías preferir otra estructura de directorios. Simplemnete la tendrás que configurar en tu webpack.config.js.

Comenzaremos por el archivo CSS. Lo pondremos en la ruta: src/styles.css.

Puedes poner todo el código CSS que quieras, por ejemplo:

body {
    background-color: #eee;
    font-family: sans-serif;
}

Ahora crearemos un archivo Javascript. Aunque parezca raro hacer un Javascript para compilar CSS, Webpack lo necesita porque es un software pensado para transpilar el Javascript. Todo proceso en Webpack comienza reconociendo un archivo Javascript.

El archivo js lo pondremos en la ruta: src/index.js. El código será algo como lo siguiente.

console.log('Compilando el CSS con Webpack 5');
import './style.css';

Como puedes ver, comenzamos con un console.log(). Eso lo puedes quitar, es solo para tener algo de Javascript. Luego tenemos lo que realmente necesitamos, que es el import del CSS.

Opcionalmente, crear otros archivos CSS

También puedes crear otros archivos CSS si lo deseas e importarlos desde tu CSS principal.

Por ejemplo, podemos tener esta estructura de archivos:

En este caso estamos colocando un archivo llamado "other.css", que tendremos que importar desde el archivo style.css.

body {
    background-color: #eee;
    font-family: sans-serif;
}
@import "./other.css";

Lo bueno de tener los archivos separados es que puedes poner el CSS de cada parte de tu web separado, lo que mejorará mucho la mantenibilidad del código.

5.- Código en el webpack.config.js

Ahora vamos a ver la parte más compleja, que es el código que necesitamos en el archivo webpack.config.js. Lo vamos a listar todo de una y luego explicamos los detalles más relevantes.

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

• Hacemos los require de las cosas que necesitamos
• Configuramos el punto de entrada "entry" con la ruta del archivo Javascript que se inicia para la compilación.
• Configuramos el punto de salida con el nombre que queramos y la ruta también de nuestra preferencia. En este caso hemos dicho que la salida la pondrá en la carpeta "dist" y el archivo se llamará "main.js". Dado este punto de salida, el CSS compilado se llamará también "main", concretamente "main.css".
• Luego cargamos los loader. En la configuración "test" indicamos la expresión regular de los archivos que se tendrán en cuenta como código CSS. Luego en "use" indicamos los loader.
• Además tenemos que instanciar el plugin mini-css-extract-plugin en la sección "plugins".

La configuración de los loaders que hemos indicado:

use: [MiniCssExtractPlugin.loader, "css-loader"],

Está pensada para llevar los archivos a producción, ya que separa el CSS del Javascript.

Hay otra posible configuración que seguramente verás en Internet que consiste en usar el loader "style-loader", que también hemos instalado, con lo que tu CSS estará embutido dentro del Javascript. Esa configuración es más indicada para la etapa de desarrollo.

use: ["style-loader", "css-loader"],

6.- Scripts para compilación

Por último vamos a crear los scripts de compilación que invocan a Webpack, creando tanto los bundles para desarrollo como para producción.

Estos scripts se colocan en el archivo package.json. Al crearse el package.json verás que ya incluyeron un script llamado "test" que puedes borrar y dejar simplemente los siguientes.

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

Para compilar en desarrollo puedes lanzar el comando:

npm run dev

Para compilar para producción el comando será el siguiente:

npm run build

Adicionalmente puedes crear un tercer comando con la opción --watch que producirá un compilado continuo, es decir, cada vez que cambian los archivos de origen se volverá a correr el proceso de compilación.

Tus scripts quedarían así:

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

Llamarás al proceso con watch con el comando:

npm run watch

Ya está! con esto hemos aprendido a compilar el CSS con Webpack 5. En adelante podrás aprender a compilar también archivos con preprocesadores como Sass.