ndice

1. Requerimientos para aprender Webpack
2. Qu es webpack?
3. Por qu es til empaquetar nuestro cdigo?
4. Webpack 5
5. Instalacin
6. webpack.config.js
7. Puntos clave de webpack
8. Referencias
9. Conclusiones

Requerimientos para aprender Webpack

Webpack al ser una tecnologa web ms avanzada resultar complejo y hasta frustrante tratar de estudiarlo y comprenderlo sin tener conocimientos previos, se recomienda mnimamente saber los siguientes puntos:

• HTML5
• CSS3
• Javascript moderno (ES6 para adelante)
• Conceptos bsicos de Node.js (no necesario pero s muy til)

Qu es webpack?

Segn la documentacin oficial, webpack es un empaquetador de mdulos estticos para apps javascript
Entindase por mdulos estticos archivos:

• Archivos .js,
• Cdigo .css puro o usando preprocesadores como sass, less, post-css, etc.
• Imgenes en diferentes formatos: .png, .jpg, etc.
• Motores de plantillas como pug.

Por qu es til empaquetar nuestro cdigo?

Motivos por los cuales usar webpack es una buena idea:

• Tienes un entorno de desarrollo ms productivo.
• Webpack permite administrar todos los archivos estticos del proyecto de una manera ms eficiente.
• Es ampliamente usado por frameworks y libreras frontend actuales como React, Angular o Vue.
• Permite modificar nuestro cdigo y prepararlo para hacer deploy en produccin.
• Permite usar imports y exports de javascript moderno para la gestin de nuestro cdigo javascript de manera simple.
• Es extensible y modular, a medida que necesitamos ms funcionalidades podemos configurarlo para que se adapte a las necesidades del proyecto.

Webpack 5

El 10 de octubre de 2020 se liber la versin 5 de webpack, esta versin es la ms actual y las ms estable por lo que para nuevos proyectos se recomienda usar esta. Puedes encontrar mas informacion sobre esta actualizacion (preguntas frecuentes, como migragrar de webpack 4 a webpack 5, etc) obviamente en la documentacin oficial

Instalacin

Para su correcto funcionamiento webpack necesita la instalacin de 2 dependencias de desarrollo:

• webpack
• webpack-cli

npm i webpack webpack-cli -D

Con este comando puedes instalar ambas dependencias en una sola lnea
** La bandera -D hace que ambas dependencias se instalen como dependencias de desarrollo.
Es importante tener un package.json antes de hacer las instalaciones, pero que este punto es ms que obvio mencionarlo.

webpack.config.js

Es un archivo especial de configuracin que tiene webpack donde podemos anotar explcitamente todas las reglas de empaquetado con las cuales funcionar el proyecto; no es ms que un objeto javascript donde con propiedades clave-valor configuramos la app correspondiente.

Este archivo por lo general se lo crea en la raz del proyecto

Puntos clave de webpack

Para entender webpack en necesario comprender 5 puntos fundamentales:

Entry

Entry es el punto de entrada de nuestra app, en otras palabras, indica el archivo principal el cual arranca la app.
Por defecto, webpack toma la ruta ./src/index.js como archivo de entrada, pero puedes configurar cualquier otra ruta relativa que quieras.

//webpack.config.jsmodule.exports = {  entry: './path/to/my/entry/file.js',};

Nota como usamos sintaxis de Common.js (module.exports) para envolver todas las configuraciones.

Output

Output es el punto de salida de la app, que indica a webpack en donde guardar los archivos listos para produccin, como ser archivos .js, .html y .css
Por defecto estos archivos se almacenan en la ruta ./dist/main.js pero es posible especificar cualquier otra ruta absoluta.
En el archivo de configuracin se veria asi:

//webpack.config.jsconst path = require('path');module.exports = {  entry: './path/to/my/entry/file.js',  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'my-first-webpack.bundle.js',  },};

Donde:

path indica la ruta absoluta donde se guardarn los archivos resultantes. Ntese que se usa la constante __dirname de node para escribir la ruta
filename indica el nombre del archivo javascript resultante.

Loaders

Por defecto webpack solo trabaja con archivos .js y .json, pero todos sabemos que todas las webs tienen HTML Y CSS, entonces, cmo solucionamos esto? La respuesta son los Loaders

Los loaders permiten a webpack procesar otros tipos de archivos para que lo convierta en mdulos vlidos para produccin.

De manera muy genrica, un loader est compuesto de 2 partes principales:

• test: identifica qu tipos de archivos deben transformarse, por lo general es una expresin regular
• use: indica el loader propiamente dicho que se debe usar para realizar la transformacin antes mencionada.

Veamos un ejemplo en nuestro archivo de configuracin:

//webpack.config.jsconst path = require('path');module.exports = {  entry: './path/to/my/entry/file.js',  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'my-first-webpack.bundle.js',  },  module: {     rules: [         {            test: /\.css$/i,            use: ["style-loader", "css-loader"],         },     ],  },};

Aspectos importantes a considerar:

• Observa como los loaders se cargan en un objeto module que tienen un arreglo rules.
• La expresin regular test: /\.txt$/ debe estar sin comillas simples ni dobles.
• La regla del ejemplo dice ms o menos esto: webpack, se que no comprendes archivos .css, por ello te paso un loader llamado style-loader y otro llamado css-loader para que los uses en todos los archivos .css del proyecto.
• El orden de los loaders es importante.
• Para que la configuracin funciones satisfactoriamente se debe respetar el orden de las reglas, primero debe ir el test y luego el use.

Plugins

Quiz el concepto ms sencillo de entender por que su propio nombre es bastante descriptivo.
Bsicamente los plugins se encargan de extender caractersticas que por defecto webpack no tiene, como la optimizacin de paquetes, la administracin de archivos, por ejemplo, HTML Y CSS, y el manejo de variables de entorno.

Veamos nuestro archivo de configuracin usando plugins:

//webpack.config.jsconst path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin'); //dependencia instalada via npmconst webpack = require('webpack'); //acceso a los 23 plugins que webpack trae por defectomodule.exports = {  entry: './path/to/my/entry/file.js',  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'my-first-webpack.bundle.js',  },  module: {      rules: [          {             test: /\.css$/i,             use: ["style-loader", "css-loader"],          },      ],  },  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],};

Puntos a considerar:

• Para este ejemplo primeramente se debe instalar e importar el plugin html-webpack-plugin desde npm haciendo: npm i html-webpack-plugin
• Los plugins para ser usados necesitan una instancia, por ello hacemos new HtmlWebpackPlugin() y le pasamos la propiedad template y le indicamos la ruta de nuestro index.html
• Como webpack no permite por defecto la salida de archivos .html necesitamos este plugin.

Webpack hasta su versin 5 cuenta con 23 plugins que vienen preinstalados listos para ser usados, puedes verlos en su documentacion oficial

Mode

Le indica a webpack en qu modo se desea empaquetar el cdigo.
Puede ser en modo production:

module.exports = {  mode: 'production',};

Donde todos nuestros archivos de salida estarn minificados.
O puede ser en modo development:

module.exports = {  mode: 'development',};

Donde todos nuestros archivos de salida no estn minificados.

Un tipo y bsico archivo de configuracin de webpack se podr ver de la siguiente manera:

//webpack.config.jsconst path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin'); //dependencia instalada via npmmodule.exports = {  entry: './path/to/my/entry/file.js',  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'my-first-webpack.bundle.js',  },  mode: 'production',  module: {      rules: [         {            test: /\.css$/i,            use: ["style-loader", "css-loader"],         },     ],  },  // ms reglas...  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],  // ms plugins...};

Con este cdigo de configuracin ya se tiene lo bsico para poder manipular archivos .html, .css y .js en un proyecto.
Esta configuracin ser til ms adelante para por ejemplo poder implementar react en el proyecto.

Referencias

• Documentacin oficial
• Webpack 4, Curso Prctico | Fazt
• Aprende webpack paso a paso | Midudev

Conclusiones

• Webpack es un empaquetador de mdulos para frontend, posiblemente el ms popular.
• Para usar webpack necesitas instalar 2 dependencias: webpack y webpack-cli
• Las configuraciones de webpack se deben hacer en un archivo webpack.config.js que se crea en la raz del proyecto.
• Webpack tiene 5 puntos fundamentales: entry, output, loaders, plugins y mode.
• Aprender webpack bsico es bastante sencillo, pero a medida que tu proyecto crece y se hace ms complejo webpack tambin necesitar configuraciones ms complejas. Este post es solo introductorio.

Posiblemente los siguientes artculos sean de tu inters:

ES6: Promesas en JavaScript

dux Oct 14 6 min read

#javascript #webdev #beginners #spanish

Cmo rayos funciona el hook useRef en React?

dux Sep 20 5 min read

#react #javascript #webdev #spanish

Local Storage API en JavaScript

dux Aug 2 3 min read

#javascript #html #webdev #spanish