Webpack desde cero

desde cero
Javier Núñez
@javiernuber
javiernuber@gmail.com

Javier Núñez
Software developer
ASPGems
@javiernuber

¿Qué es un módulo?
Un módulo es un trozo de código re-utilizable que
encapsula los detalles de implementación y expone
un API pública de modo que pueda ser cargado y
usado por otro código de manera sencilla.
Los módulos deben permitir
➔ Abstraer el código
➔ Encapsular el código
➔ Reutilizar el código
➔ Gestionar su dependencias

Module systems
➔ Variables globales
◆ Global import
◆ Revealing module pattern
➔ CommonJS
➔ AMD (Asynchronous Module Definition)
➔ UMD (Universal Module Definition)
➔ ECMAScript 2015 (ES6)

➔ Variables globales - Revealing module pattern
var myGradesCalculate = (function () {
var myGrades = [93, 95, 88, 0, 55, 91];
var average = function() {
var total = myGrades.reduce(function(accumulator, item) {
return accumulator + item;
}, 0);
return 'Your average grade is ' + total / myGrades.length + '.';
};
return {
average: average,
}
})();
myGradesCalculate.average(); // 70.33333333333333
Module systems

➔ CommonJS
➔function myModule() {
this.hello = function() {
return 'hello!';
}
this.goodbye = function() {
return 'goodbye!';
}
}
module.exports = myModule;
var myModule = require('myModule');
var myModuleInstance = new myModule();
myModuleInstance.hello(); // 'hello!'
myModuleInstance.goodbye(); // 'goodbye!'
Module systems

➔ AMD (Asynchronous Module Definition)
define([], function() {
return {
hello: function() {
console.log('hello');
},
goodbye: function() {
console.log('goodbye');
}
};
});
define(['./myModule', './otherModule'], function(myModule, otherModule) {
console.log(myModule.hello());
});
myModule.js
Module systems

➔ UMD (Universal Module Definition)
(function (root, factory) {
if (typeof define === 'function' && define.amd) { // AMD
define(['myModule', 'otherModule'], factory);
} else if (typeof exports === 'object') { // CommonJS
module.exports = factory(require('myModule'), require('otherModule'));
} else { // Browser globals (Note: root is window)
root.returnExports = factory(root.myModule, root.otherModule);
}
}(this, function (myModule, otherModule) {
// Methods
function notHelloOrGoodbye(){}; // A private method
function hello(){}; // A public method because it's returned (see below)
// Exposed public methods
return {
hello: hello,
}
}));
Module systems

➔ ECMAScript 6 (ES6)
export let counter = 1;
export function increment() {
counter++;
}
export function decrement() {
counter--;
}
import * as counter from './counter';
console.log(counter.counter); // 1
counter.increment();
console.log(counter.counter); // 2
counter.js
Module systems

Module loaders
Gestionan las dependencias y cargan los módulos.

Module bundlers
Además de gestionar las dependencias y cargar los
módulos, generan un solo código encadenado y
minificado.

““Every static asset should be able to be a module”
Not just js; css, images, fonts, … all are modules

¿Qué es Webpack?
Es mucho más que un empaquetador.
“Es una de las herramientas más poderosas que existen en el
arsenal Frontend al dia de hoy, sin importar tu stack de desarrollo,
sea Angular, React, Vue, Ember o Vanilla JS”
○ Gestión de dependencias
○ Multiples module systems (CommonJS, AMD, ES6 ...)
○ Transformaciones de código y automatizar tareas
○ Permite empaquetados parciales
○ Permite configuraciones según entorno
○ Tree shaking, Caching, Shimming y Splitting
○ Gestión de carga asíncrona
○ Entorno de desarrollo

Conceptos básicos
➔ Entry Points
➔ Output
➔ Loaders
➔ Plugins
➔ Mode

Conceptos básicos
Entry Points
Nuestro módulo principal, de donde
se parte a importar los demás
módulos.
Puedes tener multiples entry points.
Default: ./src/index.js

Conceptos básicos
Output
Configuraciones para la generación
del archivo o archivos resultantes.
● Donde generar los archivos
● Cómo nombrarlos
Default: ./dist/main.js

Conceptos básicos
Loaders
Nos ayuda a cargar todo tipo de
archivos como imágenes (jpg, png, gif,
svg...), fuentes, hojas de estilo, ficheros
json y hasta “lenguajes” como
Coffescript, Less, Sass, Stylus, PostCSS,
Ts, Jsx, Vue...

Conceptos básicos
Plugins
Nos ayuda a extender las
características de Webpack.
Por ejemplo podemos comprimir
usando Uglify, dividir nuestros bundles
en chunks más pequeños para que
nuestra App cargue más rápido...

Conceptos básicos
Mode
Es posible establecer el modo en
desarrollo, producción o ninguno.
En función del modo establecido se
habilitarán optimizaciones integradas
en el paquete. El valor predeterminado
es production.

https://github.com/javiernuber/webpack-caceresjs
Probemos
WEBPACK

Instalación
Necesitamos instalar Node.js y NPM (https://nodejs.org)
Creamos un directorio y nos situamos en el.
$ mkdir caceresjs
$ cd caceresjs
Creamos un ./package.json:
$ npm init -y
Descargamos webpack:
$ npm install webpack webpack-cli --save-dev
YA ESTÁ INSTALADO!!

Comando
En webpack 4 no necesitamos fichero de configuración!!
Para probar Webpack, necesitamos crear un entry point
$ mkdir src
$ echo "console.log('Hello World')" > src/index.js
$ webpack
Ejecutamos el comando webpack.
$ webpack
La ejecución del comando generará el fichero main.js en la carpeta dist

Comando
Podemos definir comandos para cada entorno en el package.json:
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
}
Ejecutamos los comandos
$ npm run dev
$ npm run build

Sobrescribiendo
entry / output
Es posible cambiar el entry point y el output en el propio comando de
configuración.
Podemos probarlo, creado la carpeta examples/custom/src/, con un
entry point llamado index.js.
Añadimos los siguientes comandos en package.json
Ejecutamos el comando:
$ npm run custom
"scripts": {
"custom": "webpack --mode development examples/custom/src/index.js --output examples/custom/dist/main.js"
}
packge.json
Ejemplo: https://github.com/javiernuber/webpack-caceresjs/tree/master/examples/custom

webpack.config.js
Usualmente nuestros proyectos necesitarán extender la configuración
por defecto, para esto podemos crear el archivo webpack.config.js
○ Es un fichero js
○ Exporta un objeto con la configuración que utilizará Webpack
○ Webpack lo buscará en la carpeta raíz del proyecto o en una
ubicación concreta, mediante el parámetro --config
○ Podemos utilizar toda la potencia de Node.js

Entry point / Output
module.exports = {
entry: "./examples/entry-output/src/index",
output: {
path: "./examples/entry-output/dist",
filename: "main.js",
}
}
webpack.config.js
"scripts": {
"entry-output": "webpack --config examples/entry-output/dev.config.js"
}
packge.json
Ejemplo: https://github.com/javiernuber/webpack-caceresjs/tree/master/examples/entry-output

Loaders
module.exports = {
...
module: {
rules: [
// Aqui van los loaders
{
// test: qué tipo de archivos quiero reconocer
// use: que loaders que procesarán los archivos
}
]
}
}

css-loader / style-loader
css-loader: Permite cargar archivos css e interpretarlos dentro de js.
style-loader: Permite imprimir el archivo css en pantalla.
Descargamos los loaders:
$ npm install style-loader css-loader --save-dev
module.exports = {
...
module: {
rules: [
{
test: /.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
webpack.config.js
Ejemplo: https://github.com/javiernuber/webpack-caceresjs/tree/master/examples/loader-css-style

Plugins
module.exports = {
...
module: {
rules: [
...
],
plugins: [
// Aqui van los plugins
]
}
}

MiniCssExtractPlugin
Este plugin extrae CSS en archivos separados.
Descargamos el plugin:
$ npm install mini-css-extract-plugin --save-dev
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
…
module: {
rules: [
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "./css/styles.css"
})
]
}
webpack.config.js
Ejemplo: https://github.com/javiernuber/webpack-caceresjs/tree/master/examples/plugin-css-extract

Múltiples entry points
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const config = {
mode: 'development',
entry: {
home: path.resolve(__dirname, "src/js/index.js"),
blog: path.resolve(__dirname, "src/js/blog.js"),
contact: path.resolve(__dirname, "src/js/contact.js")
},
output: {
path: path.resolve(__dirname, "dist"),
filename: 'js/[name].js'
},
module: {
rules: [
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "./css/[name].css",
})
]
}
webpack.config.js
Ejemplo: https://github.com/javiernuber/webpack-caceresjs/tree/master/examples/multi-entry-points

Webpack puede ver observar y recompilar los archivos cuando cambien.
También podemos configurar esta opción en webpack.config.js
watch
"scripts": {
"loader-css-style": "webpack --config examples/entry-output/dev.config.js" --watch
}
packge.json
module.exports = {
// ...
watch: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000,
ignored: ['files/**/*.js', 'node_modules']
},
// ...
};

Descargamos el plugin:
$ npm install webpack-dev-server -D
Usamos el comando webpack-dev-server
Webpack DevServer
webpack.config.js
"scripts": {
"dev": "webpack-dev-server --config examples/webpack-dev-server/webpack.config.js"
}
packge.json
module.exports = {
// ...
devServer: {
contentBase: path.join(__dirname), // Ruta por defecto: dist
open: true, // Abre una pestaña en el navegador
compress: true, // Comprime los archivos (gzip)
publicPath: "/dist/", // Los archivos estarán disponibles en esa ruta
port: 9000// Puerto 9000
}
};
Ejemplo: https://github.com/javiernuber/webpack-caceresjs/tree/master/examples/webpack-dev-server

babel-loader
babel-core Core de Babel
preset-env: Estándar ECMA
babel-loader: Permite transpilar archivos JavaScript usando Babel.
Descargamos los paquetes necesarios:
$ npm install babel-loader @babel/core @babel/preset-env -D
...
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
...
webpack.config.js
Ejemplo: https://github.com/javiernuber/webpack-caceresjs/tree/master/examples/loader-babel

url-loader
Es un loader que transforma archivos en base64. Veamos un ejemplo
para manejar imágenes:
Descargamos el loader:
$ npm install url-loader -D
...
module: {
rules: [
{
test: /.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 1000000,
}
}
}
...
webpack.config.js
Ejemplo: https://github.com/javiernuber/webpack-caceresjs/tree/master/examples/loader-url-images

url-loader
Veamos un ejemplo para manejar fuentes:
...
module: {
rules: [
{
test: /.(png|jpg|gif|woff|eot|ttf|svg)$/,
use: {
options: {
limit: 1000000,
}
}
}
...
webpack.config.js
Ejemplo: https://github.com/javiernuber/webpack-caceresjs/tree/master/examples/loader-url-fonts

file-loader
Loader para extraer ficheros a una carpeta destino. Se puede utilizar
junto a url-loader para extraer los fichero que superan un tamaño.
Descargamos el loader:
$ npm install file-loader -D
...
module: {
rules: [
{
test: /.(png|jpg|gif|woff|eot|ttf|svg)$/,
use: {
options: {
limit: 100000,
name: 'images/[name].[hash].[ext]',
}
}
}
...
webpack.config.js
Ejemplo: https://github.com/javiernuber/webpack-caceresjs/tree/master/examples/loader-files

json-loader
Soporte para archivos JSON. A partir de la versión 4 de Webpack no es
necesario instalar el paquete json-loader
Necesario configurar nada!
Ejemplo: https://github.com/javiernuber/webpack-caceresjs/tree/master/examples/loader-json

React
react y react-dom: Dependencias proyecto React
preset-react: Para compilar JSX a Javascript
babel-loader: Permite transpilar archivos JavaScript usando Babel.
Descargamos los paquetes necesarios:
$ npm install babel-loader @babel/core @babel/preset-env @babel/preset-react -D
$ npm install react react-dom -S
...
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
}
...
webpack.config.js
Ejemplo: https://github.com/javiernuber/webpack-caceresjs/tree/master/examples/react

sass-loader
node-sass: Compilador sass.
sass-loader: Loader para procesar ficheros sass.
Descargas:
$ npm install node-sass sass-loader -D
...
{
test: /.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
"css-loader",
"sass-loader"
]
}
...
webpack.config.js
Ejemplo: https://github.com/javiernuber/webpack-caceresjs/tree/master/examples/loader-sass

Caching
Webpack puede ayudarnos a controlar el cacheo de ficheros por parte del
navegador mediante el uso de un hash.
Hash global
[name]: Nombre de la entrada.
[hash]: Hash generado cada vez que se lanza el proceso de empaquetado.
const path = require("path")
module.exports = {
entry: {
vendor: "./src/vendor.js",
main: "./src/index.js"
},
output: {
path: path.join(__dirname, "build"),
filename: "[name].[hash].js"
}
}
...
webpack.config.js

Caching
Hash por bundle
[name]: Nombre de la entra.
[chunkhash]: Este hash se genera a partir del contenido del fichero. De
esta forma, si el fichero no cambia, el hash sigue siendo el mismo.
const path = require("path")
module.exports = {
entry: {
vendor: "./src/vendor.js",
main: "./src/index.js"
},
output: {
path: path.join(__dirname, "build"),
filename: "[name].[chunkhash].js"
}
}
...
webpack.config.js

Splitting
Webpack nos proporciona diferentes formas de dividir nuestros
empaquetados en trozos para poder optimizar la carga.
➔ Separación del CSS
➔ Separación de librerías externas
➔ Carga asíncrona de módulos

Separación del CSS
MiniCssExtractPlugin

Separación de librerías
Desde webpack v4, el CommonsChunkPlugin se eliminó en favor de
optimization.splitChunks
module.exports = {
//...
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[/]node_modules[/]/,
name: 'vendors',
chunks: 'all'
}
}
}
}
};
webpack.config.js
Ejemplo: https://github.com/javiernuber/webpack-caceresjs/tree/master/examples/commons-chunk

Carga asíncrona
Con Webpack, podemos indicar que se genere un paquete mínimo con
lo que más se suele usar y después ir cargando otros módulos cuando
sean usados.
La forma de hacerlo es con la función import().
index.js
Ejemplo: https://github.com/javiernuber/webpack-caceresjs/tree/master/examples/dynamic-import
async function determineDate() {
const moment = await import('moment');
return moment().format('MMMM Do YYYY, h:mm:ss a');
}
determineDate().then(str => console.log(str));

¡GRACIAS!
@javiernuber

Webpack desde cero

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Webpack desde cero

Similar a Webpack desde cero (20)

Webpack desde cero