Multiples HTML / Rutas con HTML Web Pack Plugin

Juan Carlos G2020-03-12

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.

📌 Suscríbete a mi canal y activa la campanita para que no te pierdas ningún video 🤘

 

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, ademas 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.

Bien, este proyecto o sitio web mas bien, 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 el vídeo o vídeos para entender cada detalle.

 

Instalación del plugin HTML Webpack Plugin

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

 

No te pierdas el próximo vídeo y si tienes dudas puedes dejarme un comentario en el canal de YouTube o enviarme un correo.

 


Juan Carlos G

Electrónica y diseño web

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.

Puedes seguirme en mis redes