Configurar Webpack & React Parte 4 - 🛠 Soporte html con Webpack

En la entrega anterior creamos nuestro código fuente inicial, ahora en esta entrega toca poner soporte a los archivos html para poder visualizar los componentes que desarrollemos.

Html

Como primer paso debemos instalar los paquetes que necesitamos para poder tratar los archivos html

npm install --save-dev html-webpack-plugin html-loader

html-webpack-plugin

Este plugin sirve para que el bundle generado por webpack que en nuestro caso es bundle.js sea insertado en index.html por medio de la etiqueta <script type="text/javascript" src="bundle.js"></script>.

html-loader

Este plugin resuelve las importaciones de archivos .html por ejemplo import html from './file.html'; para poder exportarlas de acuerdo a la configuración que le pasemos el plugin, como por ejemplo que minifique el archivo.

Editando nuestro webpack.config.js

En este punto agregaremos el nuevo codigo en webpack.config.js para poder utilizar estos dos plugins.

Como primer paso requerimos html-webpack-plugin

const HtmlWebpackPlugin = require("html-webpack-plugin");

Como segundo paso agregamos una sección nueva llamada plugins en la configuración y dentro de ella escribiremos el uso de nuestro plugin indicándole donde se encuentra nuestro index.html creado en la entrega pasada.

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html",
    }),
  ],
  ...
};

Como tercer paso nos queda crear la regla para el uso de html-loader.

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
      ...
    ],
  },
  ...
};

Dando como resultado final el siguiente código

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html",
    }),
  ],
};

Probando la configuración nueva.

En este punto nos disponemos a probar la nueva configuración que agregamos.

npm run build

Ahora tenemos un archivo nuevo llamado index.html dentro de la carpeta dist, este archivo ya tiene la referencia a bundle.js.

.
├── dist
│   ├── bundle.js
│   └── index.html
├── public
│   └── index.html
├── src
│   ├── components
│   │   └── HolaMundo.jsx
│   └── index.js
├── .babelrc
├── package-lock.json
├── package.json
└── webpack.config.js

Despedida

En la siguiente entrega añadiremos dos nuevos comandos uno para transpilar en modo desarrollo y otro para poder probar nuestro código en modo en vivo.