Múltiples HTML y Rutas con HTML Web Pack Plugin

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.

Juan Carlos García
by Juan Carlos García24-Ag-20221

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.

Suscribirme

Gracias por tu calificación:

1

Categorías


  • EWebik
  • React JS
  • SQL
  • Base de datos
  • PHP - MySQL
  • Página Web
  • Servidores
  • Flexbox
  • NodeJS
  • WordPress
  • POO

🥇 Creación de páginas web

⚡️ Quiero mi página web 💪🏼

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

 

Suscribirme

Gracias por tu calificación:

1

Categorías


  • EWebik
  • React JS
  • SQL
  • Base de datos
  • PHP - MySQL
  • Página Web
  • Servidores
  • Flexbox
  • NodeJS
  • WordPress
  • POO

🥇 Creación de páginas web

⚡️ Quiero mi página web 💪🏼

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.

Suscribirme

Gracias por tu calificación:

1

Categorías


  • EWebik
  • React JS
  • SQL
  • Base de datos
  • PHP - MySQL
  • Página Web
  • Servidores
  • Flexbox
  • NodeJS
  • WordPress
  • POO

🥇 Creación de páginas web

⚡️ Quiero mi página web 💪🏼
Juan Carlos García

Juan Carlos García

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.

Desarrollador de software

© 2022 EWebik

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