HTML en Webpack

Curso de Webpack

Introducción a Webpack

¿Qué es Webpack?

Conceptos básicos de Webpack

Proyecto inicial

Tu primer build con Webpack

Instalación de Webpack y construcción del proyecto

Configuración de webpack.config.js

Loaders y Plugins en Webpack

Babel Loader para JavaScript

HTML en Webpack

Loaders para CSS y preprocesadores de CSS

Copia de archivos con Webpack

Loaders de imágenes

Loaders de fuentes

Optimización: hashes, compresión y minificación de archivos

Webpack Alias

Deploy del proyecto

Variables de entorno

Webpack en modo desarrollo

Webpack en modo producción

Webpack Watch

Deploy a Netlify

Herramientas de desarrollo complementarias

Webpack Dev Server

Webpack Bundle Analyzer

Webpack DevTools

Integración básica de React.js

Instalación y configuración de React

Configuración de Webpack 5 para React.js

Configuración de plugins y loaders para React

Configuración de Webpack para CSS en React

Optimización de Webpack para React

Deploy del proyecto con React.js

Próximos pasos

Continúa con el Curso Práctico de Webpack

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Crear cuenta

Si ya tienes una cuenta,

Iniciar sesión

Recursos

Aportes 28

Preguntas 23

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Rony Porraz Vargas

hace un año

HtmlWebpackPlugin
Es un plugin para inyectar javascript, css, favicons, y nos facilita la tarea de enlazar los bundles a nuestro template HTML.

Instalación

npm

npm i html-webpack-plugin -D

yarn

yarn add html-webpack-plugin -D

Al webpack config queda asi

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'production', // LE INDICO EL MODO EXPLICITAMENTE
    entry: './src/index.js', // el punto de entrada de mi aplicación
    output: { // Esta es la salida de mi bundle
        path: path.resolve(__dirname, 'dist'),
        // resolve lo que hace es darnos la ruta absoluta de el S.O hasta nuestro archivo
        // para no tener conflictos entre Linux, Windows, etc
        filename: 'main.js', 
        // EL NOMBRE DEL ARCHIVO FINAL,
    },
    resolve: {
        extensions: ['.js'] // LOS ARCHIVOS QUE WEBPACK VA A LEER
    },
    module: {
        // REGLAS PARA TRABAJAR CON WEBPACK
        rules : [
            {
                test: /\.m?js$/, // LEE LOS ARCHIVOS CON EXTENSION .JS,
                exclude: /node_modules/, // IGNORA LOS MODULOS DE LA CARPETA
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    // SECCION DE PLUGINS
    plugins: [
        new HtmlWebpackPlugin({ // CONFIGURACIÓN DEL PLUGIN
            inject: true, // INYECTA EL BUNDLE AL TEMPLATE HTML
            template: './public/index.html', // LA RUTA AL TEMPLATE HTML
            filename: './index.html' // NOMBRE FINAL DEL ARCHIVO
        })
    ]
}

Orlando Manuel Mendoza Vargas

hace un año

TIP: Si lo notaron cuando se hace bundle la etiqueta <script> es insertada adentro de la etiqueta <head>… Para insertarlo al final de la etiqueta <body> se le pasa el siguiente string: ‘body’.

plugins: [
        new HtmlWebpackPlugin({ 
		inject: 'body',
		template: './public/index.html'
		filename: './index.html'
	})
]

se le puede pasar cualquiera de los siguientes valores al atributo inject

true, 'body', 'head', false

Aquí les dejo la documentación oficial del plugin: https://github.com/jantimon/html-webpack-plugin#plugins

Jenny Aguilar

hace un año

Para los que van pasando por el curso, les recomiendo revisar la documentación de los loaders y plugins en https://www.npmjs.com/ en la medida que los van presentando en el curso, al menos para tener una referencia futura de dónde encontrar la documentación, ya que a medida que pasa el tiempo las herramientas se van actualizando y por ejemplo:

A esta fecha al descargar webpack está disponible la versión 5.36.2 , por tanto, al instalar el plugin con el comando que se muestra en el curso, se instaló la versión 5 del plugin:

npm i html-webpack-plugin -D

Pero si por alguna razón ya tenías instalado webpack en una versión anterior, ejemplo webpack 4.36, entonces debería s instalar la versión del plugin 4

npm i -D html-webpack-plugin@4

La documentación señala estas consideraciones y créanme, en la medida que participen en más proyectos, pasarán un montón de tiempo tratando de encontrar soluciones por problemas de compatibilidad de las versiones de las distintas herramientas y requerirán escudriñar la documentación.

Emmanuel Rodríguez Ramírez

hace un año

** HtmlWebpackPlugin**

Webpack reference
Github reference

Cabe mencionar que el profesor, por practicidad, esta comentando opciones que son determinadas por default.

    plugins: [
      new HtmlWebpackPlugin({
	inject: true, // default true ... true || 'head' || 'body' || false
        template: resolve(__dirname, "./public/index.html"),
	filename: './index.html' // default index.html
      }),
    ],

Por comentario adicional, este plugin nos permite personalizar la creación de nuestros archivos HTML con la intención de ser servidos como bundles, los cuales, serán instancias de estandarización de archivo útiles plantillass lodash

william parra

hace un año

este profesor entra en mi top 3 de platzi

Andres Felipe Pinchao Ramirez

hace un año

MY NOTES FOR HTML IN WEBPACK

Como vamos a preparar nuestro proyecto para que webpack pueda entenderlo y prepararlo

Lo primero que hay que hacer es instalar el plugin que nos permite trabajar webpack con html

npm i html-webpack-plugin -D

Después añadimos esta dependencia a la configuración de webpack

//traemos esta dependencia que la instalamos con un comando de npm previamente

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
    //hacemos una instancia de lo que definimos en el inicio del archivo
      // le anadimos por parametro un objeto donde vamos a tener las 
        //configuraciones que le vamos anadir a nuestro plugin
    new HtmlWebpackPlugin({

      //inyecta el bundle al template html
      inject: true,
      //la ruta al template html
      template: './public/index.html',
      //nombre final del archivo
      filename: filename: './index.html' 

    })
  ]

Eliminamos el script de nuestro html porque webpack se encargara de insertar el script que compila

en nuestro html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../src/styles/main.css">
  <title>JS Portfolio</title>
</head>

<body>
  <div id="main"></div>
  <!-- <script type="module" src="../src//index.js"></script> -->
</body>

</html>

Compilamos webpack

npm run build

Una vez compilamos nuestro archivo de webpack se insertara el main.js en nuetsro html

agregamos otro script para ejecutar mas facil nuestros comando

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "dev": "webpack --mode development"

  },

Bikatti

hace un año

HTML en Webpack

Para poder preparar HTML para usarlo con Webpack tendremos que instalar el plugin de html-webpack-plugin. El comando para instalarlo es:

npm i html-webpack-plugin -D

Con este plugin podremos trabajar con html, poder identificarlo y generar un nuevo recurso basado en esto mismo.

Tenemos que configurar el plugin para que sirva dentro de webpack.

		plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html'
        })
    ]
}

AlanVazquez

hace 5 meses

Dejo mi aporte de como hice para exportar todos mis archivos HTML que estan dentro de ./public/html
Basicamente use la libreria fs para filtrar los archivos que terminen en .html y por cada archivo encontrado cree una nueva instancia de HtmlWebpackPlugin

Paolo Santiago Carrión Tipo

hace un año

Hola una pregunta, como podria agregar varios archivos html a la parte de template ?

Andrés Gallego

hace un año

Miguel Ángel Reyes Moreno

hace un año

<h4>HTML en Webpack</h4>

"build": "webpack --mode production" para modo de producción y minificado
"dev": "webpack --mode development" para modo de desarrollo y no minificado

Edgar Lopez Arroyo

hace un año

plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html'
        })
    ]```

CarlosSalasFT

hace un año

Creo que nos faltó agregar la extensión de los archivos .mjs

resolve: {
    extensions: [".js", ".mjs"]
  },```

Santiago Bastidas Rodríguez

hace 2 meses

HTML on Webpack

Install html plugin to work on the project

npm install html-webpack-plugin -D

Add the plugin to webpack settings file

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  resolve: {
    extensions: ['.js']
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: './index.html'
    })
  ]
}

File result `index.html` after webpack treatment

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../src/styles/main.css">
  <title>JS Portfolio</title>
<script defer src="main.js"></script></head>

<body>
  <div id="main"></div>
</body>

</html>

Alonso Cangalaya

hace 3 meses

Estoy super emocionado de todo lo que se puede hacer con webpack, el curso esta 10/10 !! 😄

José Brandon Palmeros Domínguez

hace 6 meses

A estas alturas es recomendable comenzar a leer las documentaciones de NPM, Webpack y Babel 😅

Sergio Andrés Majé Franco

hace 7 meses

Para fijar el título en el HTML desde el plugin, se puede hacer de la siguiente manera:

webpack.config.js:

new HtmlWebpackPlugin({
title: 'título de mi app',
})

template html:

<head>
	<title><%= htmlWebpackPlugin.options.title %><</title>
</head>

Juan Pablo Jimenez

hace 8 meses

7.-HTML en Webpack

.
Primero necesitamos instalar el plugin necesario para la configuración de webpack y trabajar mejor con html.

npm install html-webpack-plugin -D

Una vez hecha la instalación vamos al archivo de webpack.config para añadir el elemento a nuestro recurso, para poder trabajar con html, identificarlo y generar un nuevo recurso basado en esto mismo.

Se le puede pasar cualquiera de los siguientes valores al atributo inject, si queremos que el script no este dentro del head como lo menciona el compañero Orlando usamos el “body”

true, 'body', 'head',false

Cuando esta hecha la configuración en webpack.config tenemos que modificar el index.html. Borramos la etiqueta de script ya que webpack al momento de preparar la aplicación prepara el html para insertar el main que se va a generar.

Una vez hecha la modificación corremos npm run build y vemos como se hacen los cambios.

Agregamos otro script en package.json que se llama dev y que ejecuta webpack —mode development

Christian Andres Moreno Ceballos

hace 9 meses

Ahora si empieza lo chido 🔥

Jose Roberto Vargas Campos

hace 10 meses

Lo divertido de todo esto es que creo que React js hace todo esto automaticamente con el build que ya viene pre ordenado

Jonh Pertuz pertuz

hace 10 meses

Siempre verifiquen que escribieron mal. por una letra o una palabra falla el comando y por al correr nos arroja un error

Jorge De Jesus Tejeda Bello

hace un año

Asi viene quedando la seccion de plugins

  plugins: [
    // Aqui es donde agregamos las librerias que nos ayuda a transpilar el codigo de nuestro proyecto
    new HTMLWebpackPlugin({
        inject: true, // Inyecta el bundle a nuestro template html
        template: './public/index.html', // Va a tomar nuestro template
        filename: './index.html' // Lo va a poner dentro de nuesta carpeta dist con el nombre de index.html
    }),
  ],

Joel Eduardo Sánchez Herrera

hace un año

Vamos a preparar nuestro webpack para que este pueda entender HTML y prepararlo para la carpeta de Distribution

Primero vamos a necesitar instalar un Plugin para la configuracion de webpack asi este podra trabajar mejor con HTML, es:

npm install html-webpack-plugin

Ya que lo tenemos vamos a ir a nuestro archivo de configuracion para poder anadir este elemento a nuestro recursos. ASi podremos generar un nuevo recurso para esto mismo.

En nuestro archivo agregaremos el siguiente codigo:

const HtmlWebpackPlugin = requiere('html-webpack-plugin');

Y dentro del Module exports agregamos la seccion de plugins despues de Module:

plugins: [
	new HtmlWebpackPlugin({
		inject:true,
		template:'./public/index.html',
		filename: './index.html' 
})
]

Ya que tenemos este archivo, necesitamos modificar nuestro HTML original para asi remover la parte donde agregamos el script y nuestro archivo, ya que al momento de compilarlo con el webpack esto nos otorgara un archivo nuevo con el JS ya integrado.

Ahora al compilar podremos ver en la carpeta dist como se inserto todo de forma automatica

Rogelio Samuel Moreno Corrales

hace un año

https://github.com/jantimon/html-webpack-plugin#options

christianlatorre

hace un año

alt + z

Naldo Duran

hace un año

👌

David Campos

hace un año

Al igual que con cualquier otro lenguaje, Webpack necesita un loader para trabajar con HTML.

Para instalarlo se usa el comando npm install html-webpack-plugin -D.

Una vez instalado hay que añadirlo a la configuración de Webpack.

Primero creamos una constante al inicio con el plugin que descargamos.

Luego creamos la propiedad plugins, que es un arreglo y ahí creamos una nueva instancia del plugin.

Esta instancia recibe un objeto de configuración con las propiedades inject que indica si se va a hacer inserción de elementos; template, que es el archivo que va a procesar y filename que es el archivo resultante.

Ahora hay que hacer algunos cambios al archivo HTML. Lo primero es eliminar la etiqueta donde consume el script, ya que Webpack se encargará de ello.

Tomás André Peñaloza Avilés

hace 2 días

En resumen:

.
El HTML-plugin se encarga de que al correr webpack, se prepare otro archivo HTML optimizado y que se inserten las etiquetas <script> de los archivos Javascript en el orden que demanda el grafo de dependencias y así evitarnos errores.

Nota: para que estos scripts se inserten al final del body se debe especificar:

inject: 'body',

Si ya tienes una cuenta,

Curso de Webpack

HTML en Webpack

Instalación

HTML en Webpack

HTML on Webpack

Install html plugin to work on the project

Add the plugin to webpack settings file

File result index.html after webpack treatment

7.-HTML en Webpack

En resumen:

File result `index.html` after webpack treatment