Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)
Cuando se construye un sitio web, es una práctica bastante estándar en estos días, tener algún tipo de proceso de compilación implementado para ayudar a llevar a cabo tareas de desarrollo y preparar tus archivos para un entorno en vivo.
Puedes utilizar Grunt o Gulp para esto, construyendo una cadena de transformaciones que te permitan lanzar tu código en un extremo y obtener algunos CSS y JavaScript minimizados en el otro.
Estas herramientas son extremadamente populares y muy útiles. Sin embargo, hay otra forma de hacer las cosas, y es usar Webpack.
¿Qué es Webpack?
Webpack es lo que se conoce como un "paquete de módulos". Toma módulos de JavaScript, entiende sus dependencias y luego los concatena de la manera más eficiente posible, arrojando solo un archivo JS al final. Nada especial, ¿verdad? Cosas como RequireJS han estado haciendo esto durante años.
Bueno, este es el truco. Con Webpack, los módulos no se limitan a archivos JavaScript. Al usar Loaders, Webpack entiende que un módulo JavaScript puede requerir un archivo CSS y que el archivo CSS puede requerir una imagen. Los recursos generados solo contendrán exactamente lo que se necesita con un mínimo de esfuerzo. Preparémonos para que podamos ver esto en acción.
Instalación
Al igual que con la mayoría de las herramientas de desarrollo, necesitarás Node.js instalado antes de poder continuar. Suponiendo que tienes esto configurado correctamente, todo lo que necesitas hacer para instalar Webpack es simplemente escribir lo siguiente en la línea de comandos.
1 |
npm install webpack -g |
Esto instalará Webpack y te permitirá ejecutarlo desde cualquier lugar de tu sistema. Luego, crea un nuevo directorio y, dentro, crea un archivo HTML básico de esta manera:
1 |
<!doctype html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<meta charset="utf-8"> |
5 |
<title>Webpack fun</title> |
6 |
</head>
|
7 |
<body>
|
8 |
<h2></h2>
|
9 |
<script src="bundle.js"></script> |
10 |
</body>
|
11 |
</html>
|
La parte importante aquí es la referencia a bundle.js, que es lo que Webpack hará para nosotros. También ten en cuenta el elemento H2: lo usaremos más adelante.
Después, crea dos archivos en el mismo directorio que tu archivo HTML. Nombra el primero main.js, que como puedes imaginar es el punto de entrada principal para nuestro script. Luego, nombra el segundo say-hello.js. Este será un módulo simple que toma el nombre de una persona y el elemento DOM e inserta un mensaje de bienvenida en dicho elemento.
1 |
// say-hello.js
|
2 |
|
3 |
module.exports = function (name, element) { |
4 |
element.textContent = 'Hello ' + name + '!'; |
5 |
};
|
Ya que tenemos un módulo simple, podemos requerirlo y llamarlo desde main.js. Es tan fácil como hacer esto:
1 |
var sayHello = require('./say-hello'); |
2 |
|
3 |
sayHello('Guybrush', document.querySelector('h2')); |
Ahora bien, si abriéramos nuestro archivo HTML, obviamente este mensaje no se mostraría ya que no incluimos main.js ni compilamos las dependencias para el navegador. Lo que tenemos que hacer es hacer que Webpack mire el main.js y vea si tiene alguna dependencia. Si es así, debería compilarlos juntos y crear un archivo bundle.js que podamos usar en el navegador.
Regresa a la terminal para ejecutar Webpack. Simplemente escribe:
1 |
webpack main.js bundle.js |
El primer archivo especificado es el archivo de entrada en el que queremos que Webpack empiece a buscar dependencias. Resolverá si algún archivo requerido requiere cualquier otro archivo y seguirá haciéndolo hasta que se resuelvan todas las dependencias necesarias. Una vez hecho esto, genera las dependencias como un único archivo concatenado en bundle.js. Si presionas regresar, deberías ver algo como esto:
1 |
Hash: 3d7d7339a68244b03c68 |
2 |
Version: webpack 1.12.12 |
3 |
Time: 55ms |
4 |
Asset Size Chunks Chunk Names |
5 |
bundle.js 1.65 kB 0 [emitted] main
|
6 |
[0] ./main.js 90 bytes {0} [built] |
7 |
[1] ./say-hello.js 94 bytes {0} [built] |
Ahora abre index.html en tu navegador para ver tu página saludando.
Configuración
No es muy divertido especificar nuestros archivos de entrada y salida cada vez que ejecutamos Webpack. Afortunadamente, Webpack nos permite utilizar un archivo de configuración para ahorrarnos el problema. Crea un archivo llamado webpack.config.js en la raíz de tu proyecto con el siguiente contenido:
1 |
module.exports = { |
2 |
entry: './main.js', |
3 |
output: { |
4 |
filename: 'bundle.js' |
5 |
}
|
6 |
};
|
Ahora podemos simplemente escribir webpack y nada más para lograr los mismos resultados.
Servidor de desarrollo
¿Qué es? ¿Ni siquiera puedes molestarte en escribir webpack cada vez que cambias un archivo? No sé, la generación actual, y demás. Bien, configuremos un pequeño servidor de desarrollo para hacer las cosas aún más eficientes. En la terminal, escribe:
1 |
npm install webpack-dev-server -g |
Después, ejecuta el comando webpack-dev-server. Esto iniciará la ejecución de un servidor web simple, utilizando el directorio actual como el lugar desde donde se entregan los archivos. Abre una nueva ventana en el navegador y visita http://localhost:8080/webpack-dev-server/. Si todo está bien, verás algo parecido a esto:
Ahora, no solo tenemos un pequeño servidor web agradable, tenemos uno que observa nuestro código en busca de cambios. Si ve que alteramos un archivo, ejecutará automáticamente el comando webpack para agrupar nuestro código y actualizar la página sin que hagamos nada. Todo sin configuración.
Pruébalo, cambia el nombre pasado a la función sayHello y vuelve al navegador para ver el cambio aplicado al instante.
Loaders
Una de las características más importantes de Webpack son los Loaders. Los Loaders son análogos a las "tareas" en Grunt y Gulp. Básicamente, toman archivos y los transforman de alguna manera antes de que se incluyan en nuestro código incluido.
Digamos que queremos usar algunos de los detalles de ES2015 en nuestro código. ES2015 es una nueva versión de JavaScript que no es compatible con todos los navegadores, por lo que necesitamos usar un loader para transformar nuestro código ES2015 en un código ES5 antiguo que sea compatible. Para ello, utilizamos el popular Babel Loader que, de acuerdo con las instrucciones, instalamos así:
1 |
npm install babel-loader babel-core babel-preset-es2015 --save-dev |
Esto instala no solo el loader en sí, sino sus dependencias y un ajuste preestablecido de ES2015, ya que Babel necesita saber qué tipo de JavaScript está convirtiendo.
Ya que el loader está instalado, sólo tenemos que decirle a Babel que lo use. Actualiza webpack.config.js para que se vea así:
1 |
module.exports = { |
2 |
entry: './main.js', |
3 |
output: { |
4 |
filename: 'bundle.js' |
5 |
},
|
6 |
module: { |
7 |
loaders: [ |
8 |
{
|
9 |
test: /\.js$/, |
10 |
exclude: /node_modules/, |
11 |
loader: 'babel', |
12 |
query: { |
13 |
presets: ['es2015'] |
14 |
}
|
15 |
}
|
16 |
],
|
17 |
}
|
18 |
};
|
Hay algunas cosas importantes a tener en cuenta. La primera es la línea test: /\.js$/, que es una expresión regular que nos dice que apliquemos este loader a todos los archivos con la extensión .js. Del mismo modo, exclude: /node_modules/ le dice a Webpack que ignore el directorio node_modules. loader y query se explican por sí mismos: usa el loader de Babel con el ajuste preestablecido ES2015.
Reinicia el servidor web pulsando ctrl+c y ejecutando webpack-dev-server de nuevo. Todo lo que tenemos que hacer ahora es usar algo de código ES6 para ensayar la transformación. ¿Qué tal si cambiamos nuestra variable sayHello para que sea una constante?
1 |
const sayHello = require('./say-hello') |
Después de guardar, Webpack debería haber recompilado automáticamente tu código y actualizado tu navegador. Con suerte, no verás ningún cambio en absoluto. Revisa a bundle.js y ve si puedes encontrar la palabra clave const. Si Webpack y Babel hicieron su trabajo, no lo verás en ningún lado, solo JavaScript antiguo.
A la parte 2
En la Parte 2 de este tutorial, veremos el uso de Webpack para agregar CSS e imágenes a tu página, así como para preparar tu sitio para la implementación.
