Múltiples HTML y Rutas con HTML Web Pack Plugin
by Juan Carlos García
3-Ag-2023
(1)
Suscribirme al canal:
Crea un página web completa con el plugin HTML Webpack Plugin
Bienvenido viajero web a este nuevo tutorial donde te enseñare a crear una página web completa con el plugin HTML Webpack Plugin en Node JS. Esto quiere decir que vamos a definir las URL que componen tu sitio web en el Webpack de tu proyecto. Si al final te ha sido útil no te olvides de suscribirte a mi canal de EWebik en YouTube o compartiendo este POST en tus redes sociales.
Este post esta dividido en dos vídeos, el primer vídeo esta al inicio de la página y el segundo vídeo esta en parte inferior dentro del contenido, este post es la recompensa por haber terminado mi primer curso de creación de paginas web, aquí creamos una página web completa y podrás llevarte el código, espero en verdad que este curso te haya sido útil.
¡No te puedes perder las nuevas clases 🧐!
Página web con Bootstrap
Página web con Bootstrap: ¿Cómo hacer y maquetar una página web con Bootstrap gratis?
(3)
Webpack
1 - ¿Cómo agregar múltiples páginas y rutas a tu sitio desde el Webpack?
Para poder crear la página completa he decidido dividir en dos partes este proyecto, en este primer vídeo lo que vamos hacer es lo siguiente:
- Crear el proyecto
- Instalación del plugin HTMLWebpackPlugin y demás paquetes
- Creación de las rutas desde el Webpack utilizando el plugin en cuestión
- Crearemos la estructura HTML de la Home en Bootstrap
- Creación de carrucel para tener un slider y mostrar tus servicios en la home
- Creación de sección de Post populares para que tus usuarios tengan el contenido actual en la Home
- Área informativa con llamada a la acción
- Finalmente el Footer
En resumen en este primer vídeo llegamos hasta la creación de la Home, en el siguiente acabamos con el maquetado de las demás secciones, así que si eres de los primeros en ver este vídeo no desesperes que pronto quedará listo el resto, de lo contrarió mas abajo esta toda la información.
2 - Creando la sección de contacto, categorías y blog
Ya esta disponible la segunda parte de este tutorial y en esta entrega lo que haremos es:
- Creación HTML de Footer
- Creando un área de Contacto, en done utilizaremos todo lo que hemos aprendido en ¿Cómo conectar Node Js Con MySQL? y ¿Cómo enviar un correo con Nodemailer?, de igual forma te recomiendo que revises mi articulo de ¿Cuál es el Servidor SMTP de GMAIL? para que puedas practicar si es que aun no tienes un correo de empresa.
- Vamos a maquetar en HTML y Bootstrap la sección de categorías
- Y por ultimo crear un layout tipo Blog donde podrás subir cada entrada o post de tu página
Con estos dos vídeos ya eres capaz de crear una página web completa gratis y totalmente funcional, además es una página web responsiva que se adapta a cualquier dispositivo con lo que tus usuarios te podrán encontrar desde cualquier lugar sin problema.
¿Qué necesitamos?
- Un editor de código como Visual Studio Code
- Tener nociones de Node.js.
- Te recomiendo ver estas otras clases que tengo donde realizo muchas acciones previas como el envió de correos, creación de base de datos, etc.
- Aquí te dejo el repositorio para que lo consultes con calma.
Puntos importantes en la creación de la página
El sitio web propuesto en este vídeo y el cual dejo en mi repositorio para que puedas descargarlo y utilizarlo como mejor te parezca, no obstante, si lo utilizas y crees que merezco que me regales un enlace o reconocimiento, me ayudarías mucho, pero no es obligatorio en lo absoluto.
Este proyecto o mejor dicho sitio web, es ideal para negocios pequeños que se quieren dar a conocer en Internet, ya que la creación de las rutas se hacen casi manualmente, por lo tanto, un sitio web con muchas URL seria muy difícil de mantener. Pero, para un sitio de unas 70 o 100 urls va perfecto.
Ahora te dejo el desarrollo y conceptos básicos para esta clase y recuerda mirar los vídeos para entender cada detalle.
Instalación del plugin HTMLWebpackPlugin
- Dado que es el plugin mas importante lo menciono directamente aquí para ver los demás plugin necesarios checa el repositorio o mira el vídeo en donde los explico casi al principio.
npm i -D html-webpack-plugin- Bien, ahora lo que corresponde es agregar el plugin a nuestro Webpack (webpack.config.js) y crearemos las rutas que definirán las páginas de tu sitio.
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: './src/cliente/index.html'
}),
new htmlWebpackPlugin({
filename: 'contacto.html',
template: './src/cliente/contacto.html'
}),
new htmlWebpackPlugin({
filename: 'blog.html',
template: './src/cliente/blog.html'
}),
new htmlWebpackPlugin({
filename: 'post.html',
template: './src/cliente/post.html'
}),
]
}Varios archivos HTML con el plugin
Como puedes observar para este ejemplo definimos las siguientes páginas:
- index.html, el cual será nuestra Home Page.
- contacto.html, En esta página tus usurarios podrán mandarte mensajes directamente en tu página y almacenarlos en una base de datos.
- blog.html, es el ejemplo de como puedes organizar las categorías de tu sitio.
- post.html, un ejemplo de como puedes escribir tus post o entradas de tu página.
Opciones del plugin HTML Webpack Plugin
Yo solo he utilizado 2 de las opciones de este plugin, sin embargo, es componente cuenta con otras opciones que puedes llegar a utilizar, por ejemplo:
- title: Indica el titulo de la sección, página o HTML que estas definiciendo
- filename: Sirve para indicar el nombre del archivo generado, por ejemplo, index.html
- template: Esta opción permite establecer un archivo HTML como platilla o template y así poder generar a partir de este archivo el código HTML de salida o resultante
- templateParameters: Podemos definir los datos para enviar al template.
Ahora bien si estableciste algo en "template" no se cargará en automático el titulo que se define en title, te recomiendo que lo hagas como lo muestro en el vídeo. Sin embargo, aquí tienes un ejemplo de como utilizar las demás opciones.
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html',
templateParameters: {
title: 'EWebik',
h1: 'Creando rutas desde el Webpack',
}
})
]
Gracias por tu calificación
(1)
- Y en el template veremos lo veríamos así.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= title %></title>
</head>
<body>
<h1><%= h1 %></h1>
</body>
</html>- Y el resultado final cuando el código HTML se genere lo veríamos así.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EWebik</title>
</head>
<body>
<h1>Creando rutas desde el Webpack</h1>
<script type="text/javascript" src="bundle.js"></script></body>
</html>webpack.config.js
Bien ahora que has visto lo mas importante no queda mas que mostrarte el archivo webpack.config.js completo, se debe mirar de la siguiente manera:
const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/cliente/js/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: './src/cliente/index.html'
}),
new htmlWebpackPlugin({
filename: 'contacto.html',
template: './src/cliente/contacto.html'
}),
new htmlWebpackPlugin({
filename: 'blog.html',
template: './src/cliente/blog.html'
}),
new htmlWebpackPlugin({
filename: 'post.html',
template: './src/cliente/post.html'
}),
]
};
Excelente, espero que mi primer curso gratuito de creación de paginas web te haya sido útil, y este post es la recompensa, te regalo el código para que lo utilices, lo modifiques y comiences con tu emprendimiento hoy mismo, nos vemos en el siguiente post.
Gracias por tu calificación
(1)
Juan Carlos García
Desarrollador de software / SEO
Durante años he desarrollado plataformas dedicadas al rastreo satelital y varios sitios web que se encuentran en la primera página de Google, y hoy quiero compartir contigo lo que se en tecnologías como: Node JS, PHP, C# y Bases de datos.
Si quieres apoyarme sígueme en mis redes sociales y suscríbete a mi canal de YouTube.