A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

HTML en Webpack

7/28
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.

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

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: 鈥榖ody鈥.

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

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.

** HtmlWebpackPlugin**

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

este profesor entra en mi top 3 de platzi

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"

  },

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

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

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

<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

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

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

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

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>

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

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

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>

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 鈥渂ody鈥

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 鈥攎ode development

Ahora si empieza lo chido 馃敟

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

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

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

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

alt + z

馃憣

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.

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',