hand Inicio
hand JSBloqs
hand GutenBloqs

Qué es WebPack

WebPack (y Babel) son herramientas imprescindibles pero que normalmente ya van configuradas de serie con frameworks como Gatsby, aquí te explico (por encima) qué es y cómo se configura

WebPack

WebPack es una librería que se utiliza para coger todo el código que hemos desarrollado y empaquetarlo en un conjunto de archivos concretos y definidos

En frameworks como Gatsby no tenemos que preocuparnos ya que esto nos viene configurado de serie (y lo que se agradece)

Lo mismo con React si utilizamos su Create React App, algo que normalmente haremos sin dudarlo ni por un instante

Pero si queremos embeber una aplicación react como (por ejemplo) un plugin de WordPress, entonces tendremos que ocuparnos personalmente de webpack

Conceptos

En la documentación oficial de webpack nos hablan de

  • Entry
  • Output
  • Loaders
  • Plugins
  • Mode

Por orden, entry se refiere al punto de entrada de nuestra aplicación, con output podremos definir cuáles y cuántos archivos queremos que se generen en el bundle final, con loaders podemos especificar lo que queremos que se empaquete )(más allá de los JavaScript y JSON que incluye por defecto), y ya estamos

Con plugins podemos especificar transformaciones (que hacíamos con loaders) pero mediante componentes que harán más "cosas", con mode podemos establecer cuándo queremos compilar para producción (por defecto) y cuándo para desarrollo

Lo mejor? Que no necesitamos especificar nada

Aunque probablemente querremos hacerlo, por ejemplo, para utilizar babel

Babel

Con Babel lo que hacemos es transformar código nuevo de JavaScript en código antiguo que todos los navegadores entienden

Como con webpack, esto ya se hace por defecto con Gatsby, pero aquí tendremos que configurarlo para que se entienda con webpack

Lo mismo con React (si no usamos el cra)

Con wordpress? Pues tendremos que configurar babel para que entienda (al menos) JavaScript y React

En código esto se reduciría a generar dos ficheros

js
// .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
js
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
}

Esto nos generaría un archivo JavaScript que incluiría toda nuestra aplicación react

Sólo nos haría falta escribir un archivo html que importara ese script

Pero también podemos hacer que webpack lo haga por nosotros

El código final nos quedaría así

js
// webpack.config.js
const HtmlWebPackPlugin = require('html-webpack-plugin')

module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
},
],
},
],
},
plugins: [new HtmlWebPackPlugin()],
}

Donde procesamos también los archivos html y con el plugin HtmlWebPackPlugin generamos el archivo html

Faltaría poner un ejemplo con código real, pero me lo reservo para cuando queramos escribir un (por ejemplo) plugin de WordPress con React

Y para entonces ya tendremos este post que nos sirve de introducción a cómo funciona webpack

draw of me

Hola, tienes en mente desarrollar una web?

Si quieres, te ayudo

11ty para webs ultra-rápidaseleventy js
Gatsby para webs complejasgatsby js
WordPress para webs para el usuario finalwordpress

Escríbeme

Lista de correo: escribo algo de tanto en cuanto