Múltiples HTML y Rutas con HTML Web Pack Plugin

InicionodejsHTMLWebpackPlugin
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 🧐!

Instalar XAMPP

Instalar XAMPP

¿Cómo Instalar XAMPP en Windows? Levantando un servidor Apache.

Página web con Bootstrap

Página web con Bootstrap

Página web con Bootstrap: ¿Cómo hacer y maquetar una página web con Bootstrap gratis?

Página Web con NodeJs

Página Web con NodeJs

Crea tu primera Página Web con NodeJS desde cero

Nodemailer

Nodemailer

¿Cómo enviar correos con nodemailer en Node.js?

NodeJs con MySQL

NodeJs con MySQL

Conexión de MySQL con Node.js: página web con base de datos

HTMLWebpackPlugin

HTMLWebpackPlugin

Múltiples HTML y Rutas con HTML Web Pack Plugin

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:

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',
      }
    })
  ]

 

  • 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.

Juan Carlos

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.

EWebik

Diseño de páginas web y aplicaciones moviles.

© 2024 EWebik