🖖 Inicio

SERVICIOS

Salir

nochedía

Qué es WebPack

300 palabras
1 minutos
February 27, 2020
blogjavascript

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

  1. WebPack
  2. Conceptos
  3. Babel

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

Qué tal la entrada?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]