hand Inicio
hand JSBloqs
hand GutenBloqs
Qu茅?
noched铆a

DESARROLLO WEB con
REACT y WORDPRESS

Ap煤ntate a la newsletter (escribo algo de tanto en cuanto)

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 馃檹
Enviar Feedback 鉁嶏笍
El texto est谩 en blanco!
Gracias por enviarme tu opini贸n
馃憤

Si quieres explorar m谩s cursos y m谩s entradas en el blog, los tienes todos en la p谩gina principal, y si el contenido te ha ayudado si lo compartes me ayudas a dar difusi贸n 馃憤

Privacidad
by kuworking.com
[ 2020 >> kuworking ]