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