Configurar Webpack & React Parte 4 - 🛠 Soporte html con Webpack
Tags: javascript, react, webpack, webdev
Published: 2020-07-02 21:40:15

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

```bash
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
```javascript
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.

```javascript
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`.

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

Dando como resultado final el siguiente código

```javascript
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.

```bash
npm run build
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7skesmoeiybbtn311hve.png)

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

```bash
.
├── 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**.