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
// .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
// 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í
// 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
Lista de correo: escribo algo de tanto en cuanto