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.
Top comments (0)