Webpack 4: Introducción

Webpack es un bundler, eso significa que nos ayudará a empaquetar de forma optimizada los archivos de nuestro sitio web en uno o varios archivos. No esta limitado solo a JavaScript, también empaqueta CSS, HTML, imágenes, entre otros según como lo configuremos.

Las versiones usadas durante la creación de este artículo fueron webpack@4.19.1 y webpack-cli@3.1.0.

Entre las características más destacadas de esta versión podemos mencionar:

• Performance improvement: Es la versión más rápida hecha hasta ahora.
• Zero Configuration: No dependemos de configuraciones para empezar a usar webpack.

Para poder explicar de que va “Zero Configuration” primero vamos a describir unos puntos y luego vamos con algo práctico.

Conceptos básicos

Entry
Default: ./src/index.js

Esto debería usarse para indicar tu archivo .js. También podría indicarse un directorio donde encontrar los archivos .js a compilar.

Output
Default: ./dist/main.js

Se indica un directorio donde se colocan tus archivos compilados o transpilados.

Loaders

Ellos deberían compilar o transpilar tu código como babel-loader, postcss-loader, entre otros.

Plugins

Ellos juegan un papel importante en como va a cambiar tu código en los archivos compilados. Por ejemplo minimizar, reemplazar contenido, transpilar, etc.

Para mayor detalle sobre estos puntos:

Concepts

Inicio rápido

Creamos un directorio nuevo y nos movemos a este:

$ mkdir webpack-4-intro
$ cd webpack-4-intro

Inicializamos un package.json:

$ npm init -y

Descargamos webpack como un módulo y webpack-cli para ejecutar este desde nuestra terminal:

$ npm install webpack webpack-cli --save-dev

Ahora abre el archivo package.json y agrega un script:

"scripts": {
  "dev": "webpack"
}

Ejecutamos el script:

$ npm run dev

Deberíamos ver un mensaje de advertencia:

WARNING in configuration

The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.

You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

Nos dice que Webpack usa por defecto el modo production pero recomienda que debería ser especificado.

Editaremos el archivo package.json para agregar el flag mode.

"scripts": {
  "dev": "webpack --mode development"
}

Al ejecutar el script ahora notaremos que nos falta una cosa más:

ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in ‘~/webpack-4-intro’

Webpack esta buscando en la carpeta ./src el archivo index.js (entry). Esto es parte de la configuración por defecto.

Creamos el archivo src/index.js y le ponemos un código como:

console.log('Hello Webpack 4!');

Al volver a ejecutar el script, nos creará el archivo main.js en la carpeta dist (output).

No especificar el archivo de entrada (entry) y el archivo de salida (output) como parte de la configuración es lo que se conoce como “Zero Configuration”.

Para probar el modo production:

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

Si ven el código en dist/main.js que fue generado con dev notarán que hay muchas líneas de código. Esto contiene el código básico de Webpack para el manejo de los módulos y a su vez los módulos usados. Este archivo se ve así de grande porque esta siendo usado para desarrollo, esto significa que no esta minimizado para su cómoda lectura y soporta características como hot module replacement (HMR), dev server y un montón de cosas que asisten nuestro desarrollo.

Al generar el código usando build verán que ahora solo contiene el código necesario y minimizado.

Si desean sobreescribir los valores por defecto desde el script:

"scripts": {
  "dev": "webpack --mode development ./src/index.js --output ./dist/main.js",
  "build": "webpack --mode production ./src/index.js --output ./dist/main.js"
}

Ahora podríamos usar el flag watch para que el código se recompile cada vez que el archivo origen fuese modificado.

"scripts": {
  "dev": "webpack --mode development ./src/index.js --output ./dist/main.js --watch",
  "build": "webpack --mode production ./src/index.js --output ./dist/main.js --watch"
}

Para mayor detalle sobre estos puntos:

Configuration

Esto fue todo lo básico para empezar con Webpack. Si sobreviviste hasta aquí, ve al siguiente artículo:

Webpack + Babel: Transpilando tu .JS

Enlaces recomendados

Webpack 4.0 Release: What's New?