logo

Aprenda Webpack en 15 minutos

Las herramientas de compilación se han convertido en una parte integral del desarrollo web, principalmente debido a la complejidad cada vez mayor de las aplicaciones de JavaScript. Los paquetes nos permiten empaquetar, compilar y organizar los muchos activos y bibliotecas necesarios para un proyecto web moderno.

En este tutorial, veremos webpack, un poderoso paquete y preprocesador de código abierto que puede manejar una gran variedad de tareas diferentes. Le mostraremos cómo escribir módulos, empaquetar código y usar algunos de los complementos del cargador. El tutorial está diseñado para principiantes totales en webpack, pero se recomienda tener algunos conocimientos de JavaScript.

¿Por qué paquete web?

Al igual que cualquier otro aspecto del desarrollo web, no existe un estándar para qué herramienta de compilación usar. En este momento, los desarrolladores tienen que elegir entre webpack, Gulp, Browserify, NPM scripts, Grunt y otros 10. Existen muchas comparaciones detalladas, pero todas estas herramientas son muy similares, por lo que la mayoría de las veces se trata de preferencias personales y del proyecto en el que estás trabajando.

Aquí hay algunos pros y contras para ayudarlo a decidir si webpack es la herramienta para usted:

Ventajas:

  • Excelente para trabajar con aplicaciones de una sola página
  • Acepta ambos require() y import sintaxis del módulo
  • Permite una división de código muy avanzada
  • Recarga en caliente para un desarrollo más rápido con React, Vue.js y marcos similares
  • La herramienta de compilación más popular según la encuesta de JavaScript de 2016

Desventajas:

  • No apto para principiantes en desarrollo web
  • Trabajar con archivos CSS, imágenes y otros recursos que no son JS es confuso al principio
  • La documentación podría ser mejor
  • Cambia mucho, incluso la mayoría de los tutoriales de 2016 ya están desactualizados

1. Instalación

La forma más fácil de instalar un paquete web es mediante un administrador de paquetes. Iremos con npm pero siéntete libre de usar Yarn u otra alternativa moderna. En ambos casos, debe tener Node.js en su máquina y un package.json listo para ir.

Es preferible instalarlo localmente (sin el -g etiqueta). Esto asegurará que todos los que trabajan en su proyecto tengan la misma versión de webpack.

npm install webpack --save-dev

Una vez que lo tengamos instalado, lo mejor es ejecutar webpack a través de un script de Node.js. Agregue estas líneas a su paquete.json:

//...
    "scripts": {
        "build": "webpack -p",
        "watch": "webpack --watch"
    },
//...

Ahora llamando al npm run build desde la terminal podemos hacer que el paquete web empaquete nuestros archivos (el -p opción significa producción y minimiza el código incluido). Ejecutando npm run watch iniciará un proceso que empaquetará automáticamente nuestros archivos cuando alguno de ellos cambie.

La última parte de la configuración es decirle al paquete web qué archivos agrupar. La forma recomendada de hacer esto es creando un archivo de configuración.

2. Archivo de configuración del paquete web

Aquí veremos el archivo de configuración en su forma más básica, pero no se deje engañar:el archivo de configuración del paquete web es bastante potente, varía mucho de un proyecto a otro y puede volverse muy complejo en algunos casos.

En el directorio raíz de su proyecto, agregue un archivo llamado webpack.config.js .

paquete web.config.js

var path = require('path');

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

La entrada La opción le dice a webpack cuál es nuestro archivo principal de JavaScript. Hay muchas estrategias diferentes para configurar puntos de entrada, pero en la mayoría de los casos una sola entrada es suficiente.

En salida especificamos el nombre y la ruta de nuestro paquete. Después de ejecutar webpack tendremos todo nuestro JavaScript en un archivo llamado bundle.js . Este es el único archivo de script que vincularemos en nuestro HTML:

<script src="./dist/bundle.js"></script>

Esta configuración debería ser suficiente para comenzar. Luego le agregaremos algunas cosas más, pero primero veamos cómo funcionan los módulos.

3. Módulos de paquetes web

Webpack proporciona múltiples formas de trabajar con módulos, y la mayoría de las veces puede elegir el que desee. Para este tutorial usaremos ES6 import sintaxis.

Queremos agregar un módulo que salude a nuestros usuarios. Creamos un archivo llamado greeter.js y haz que exporte una función simple:

saludo.js

function greet() {
    console.log('Have a great day!');
};

export default greet;

Para usar este módulo, tenemos que importarlo y llamarlo en nuestro punto de entrada , que si miras hacia atrás en el archivo de configuración es index.js.

index.js

import greet from './greeter.js';

console.log("I'm the entry point");
greet();

Ahora, cuando ejecutamos el paquete con npm run build , y abrimos nuestro HTML en el navegador, vemos esto:

Nuestro punto de entrada y nuestro módulo de bienvenida se compilaron en un archivo llamado bundle.js y fue ejecutado por el navegador. Aquí hay un diagrama de flujo simple de lo que está sucediendo hasta ahora:

4. Bibliotecas requeridas

Queremos que nuestra aplicación especifique qué día de la semana es cuando saluda a los usuarios. Para hacerlo, usaremos moment.js importándolo directamente a nuestro módulo de bienvenida.

Primero necesitamos instalar la biblioteca a través de npm:

npm install moment --save

Luego, en nuestro módulo de saludo, simplemente importamos la biblioteca exactamente de la misma manera que importamos los módulos locales en el punto anterior:

saludo.js

import moment from 'moment';

function greet() {
    var day = moment().format('dddd');
    console.log('Have a great ' + day + '!');
};

export default greet;

Luego de agruparnos nuevamente para aplicar los cambios, en la consola del navegador tendremos los siguientes mensajes:

Nuestro diagrama de flujo ahora se ve así:

5. Cargadores

Los cargadores son la forma en que el paquete web ejecuta tareas durante la agrupación y el procesamiento previo o posterior de los archivos de alguna manera. Por ejemplo, pueden compilar TypeScript, cargar componentes Vue.js, renderizar plantillas y mucho más. La mayoría de los cargadores están escritos por la comunidad, para obtener una lista de cargadores populares, vaya aquí.

Digamos que queremos agregar un linter a nuestro proyecto que verifique nuestro código JS en busca de errores. Podemos hacerlo al incluir el cargador JSHint, que detectará todo tipo de malas prácticas y olores de código.

Primero necesitamos instalar tanto JSHint como el cargador JSHint del paquete web:

npm install jshint jshint-loader --save-dev

Posteriormente, agregaremos algunas líneas a nuestro archivo de configuración del paquete web. Esto inicializará el cargador, le dirá qué tipo de archivos verificar y qué archivos ignorar.

paquete web.config.js

var path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // Add the JSHint loader
  module: {
    rules: [{
      test: /\.js$/, // Run the loader on all .js files
      exclude: /node_modules/, // ignore all files in the node_modules folder
      use: 'jshint-loader'
    }]
  }
};

Ahora, cuando se inicie webpack, nos mostrará una lista de advertencias en la terminal (que ignoraremos):

Desde momento.js se encuentra en los node_modules carpeta, el cargador JSHint no la eliminará:

Lecturas adicionales

¡Esto concluye nuestra introducción a webpack! Dado que esta es una lección para principiantes, tratamos de cubrir solo los conceptos más útiles y más importantes de webpack. Esperamos que el tutorial haya sido útil, no demasiado confuso y dentro del límite de 15 minutos del título.

En un futuro cercano, planeamos agregar una segunda parte a este tutorial, explicando cómo trabajar con módulos CSS y otras funciones más avanzadas. Mientras tanto, si desea obtener más información sobre webpack (y hay mucho más), le recomendamos que consulte estos increíbles recursos:

  • webpack.js.org:el sitio web oficial del proyecto, muchas guías y documentos disponibles allí.
  • Impresionante paquete web:lista seleccionada de recursos de paquetes web.
  • Webpack 2:tutorial completo:videotutorial gratuito de casi dos horas de duración.
  • Ejemplos de paquetes web:lista de varias configuraciones de paquetes web.

No