Hablemos sobre cómo comprimir y empaquetar recursos html en webpack.

¿Por qué necesita empaquetar recursos html?

Al escribir código, se introduce el archivo js en src. Después del empaquetado del paquete web, se forma un archivo de entrada. En este momento, el nombre y la ruta del archivo js en html son incorrectos. debe empaquetarse y el archivo html debe empaquetarse. La ruta al archivo js importado ha sido reemplazada.

Los beneficios de usar webpack para empaquetar html son:

(1) El archivo js empaquetado se puede introducir automáticamente en html

(2) Una vez empaquetado el html, aún se generará en la carpeta de compilación y se combinará con el archivo js empaquetado. para que cuando nos conectemos Solo necesite copiar las carpetas generadas por el paquete al entorno en línea

(3) Nos ayudará a comprimir archivos html

Cómo comprimir y empaquetar recursos html en webpack

1. Instale el complemento

Webpack de forma nativa

Solo puede entender archivos JS y JSON, y debe admitir el empaquetado de otros archivos. Todos los tipos de archivos deben instalarse con el complemento o cargador correspondiente.

Si necesitamos empaquetar archivos HTML, primero debemos instalar html-webpack-plugin :

npm install html-webpack-plugin -D

La función de este complemento:

• crear un archivo html en la exportación de forma predeterminada. y luego importar todos los recursos JS/CSS.

• También puede especificar un archivo html usted mismo y agregar recursos a este archivo html.

2. Configuración de Webpack.config.js

Después de instalar html-webpack-plugin

configúrelo en el archivo webpack.config.js :

//...
 // 1. Introduce el complemento const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 módulo.exportaciones = {
   //...
   // 2. Configure los complementos del complemento en complementos: [
     nuevo HtmlWebpackPlugin({
       plantilla: 'index.html', // Especifica el archivo de plantilla de entrada (relativo al directorio raíz del proyecto)
       nombre de archivo: 'index.html', // Especifique el nombre y la ubicación del archivo de salida (relativo al directorio de salida)
       // Para otros elementos de configuración del complemento, puede ver la documentación oficial del complemento})
   ]
 }

Enlace de configuración detallada: https://www.npmjs.com/package/html-webpack-plugin

Asegúrese de que la ruta y el nombre del archivo de plantilla de entrada sean consistentes con la configuración, y luego podrá compilar.

3. Al configurar múltiples entradas JS y múltiples situaciones HTML

, es necesario compilar varios archivos HTML chunk los archivos deben importar diferentes archivos JS. Sin embargo, de forma predeterminada, el archivo HTML empaquetado importará todos los archivos JS empaquetados. especificado para distribuir JS.

ruta constante = requerir('ruta');
 // 1. Introduce el complemento const HtmlWebpackPlugin = require('html-webpack-plugin');
 módulo.exportaciones = {
   //...
   // 2. Configurar la entrada JS (múltiples entradas)
   entrada: {
     proveedor: ['./src/jquery.min.js', './src/js/common.js'],
     índice: './src/index.js',
     carrito: './src/js/cart.js'
   },
   //Configurar la salida de exportación: {
     nombre de archivo: '[nombre].js',
     ruta: ruta.resolve(__dirname, 'build/js')
   },
   // 3. Configurar complementos: [
     nuevo HtmlWebpackPugin({
       plantilla: 'index.html',
       nombre de archivo: 'index.html',
       // Usa fragmento para especificar qué archivos JS importar fragmento: ['index', 'vendor']
     }),
     // ¿Cuántos HTML deben compilarse y cuántos complementos nuevos se necesitan? new HtmlWebpackPlugin({
       plantilla: './src/cart.html',
       nombre de archivo: 'carrito.html',
       trozo: ['carro', 'proveedor']
     })
   ]
 }

Consejo: Lo que hay que tener en cuenta aquí es cuántos archivos HTML necesita compilar y cuántas veces necesita crear el nuevo HtmlWebpackPlugin .

Una vez compilada correctamente la configuración anterior, el resultado es el siguiente:

build
 |__ index.html #Presentar index.js y seller.js
 |__ cart.html #Presentar cart.js y seller.js
 |__js
      |__ seller.js # Generado por jquery.min.js y common.js |__ index.js # Generado por index.js |__ cart.js # Generado por cart.js para

recursos html comprimidos y empaquetados Ejemplo

1, paquete web. config.js configuración

const HTMLWebpackPlugin = require('html-webpack-plugin')
...
 complementos: [
    // html-webpack-plugin configuración de empaquetado html Este complemento generará un archivo HTML5 para usted new HTMLWebpackPlugin({
      plantilla: "./index.html", // Ruta relativa o absoluta empaquetada a la plantilla (destino de empaquetado)
      title: 'Home', // Título utilizado para el hash del documento HTML generado: true, //true agrega el hash de compilación del paquete web único a todos los scripts y archivos CSS incluidos. Se utiliza principalmente para borrar el caché,
      minificar: { // Comprimir html
        colapsoWhitespace: true, // Contraer espacio en blanco keepClosingSlash: true, // Mantener espacios cerrados removeComments: true, // Eliminar comentarios removeRedundantAttributes: true, // Eliminar atributos redundantes removeScriptTypeAttributes: true, // Eliminar atributos de tipo de script Script removeStyleLinkTypeAttributes: true, // Eliminar el atributo de tipo de enlace de estilo useShortDoctype: true, // Usar el tipo de documento corto preserveLineBreaks: true, // Preservar saltos de línea minifyCSS: true, // Comprimir CSS en texto
        minifyJS: verdadero, // Comprimir js en texto
      }
    }),
  ],
...

2. En este momento nuestro index.html

<!DOCTYPE html>
<html idioma="">
  <cabeza>
    <meta juego de caracteres="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta nombre="viewport" content="ancho=ancho-dispositivo,escala-inicial=1.0">
    <title>Demostración del paquete web</title>
  </cabeza>
  <cuerpo>
    <div id="aplicación">
      configuración de empaquetado html</div>
  </cuerpo>
</html>

3. En este momento nuestro index.js

importa './../css/index.less'

función agregar(x,y) {
 regresar x+y
}
console.log(add(2,3));

3. Escriba el paquete en el paquete web de la consola y descubra que el archivo de salida del paquete tiene un index.html adicional, el contenido es el siguiente

<!DOCTYPE html>
<html idioma="">
  <cabeza>
    <meta juego de caracteres="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta nombre="viewport" content="ancho=ancho-dispositivo,escala-inicial=1.0">
    <title>Demostración del paquete web</title>
  <script diferir src="index.js"></script></head>
  <cuerpo>
    <div id="aplicación">
      configuración de empaquetado html</div>
  </cuerpo>
</html>

<script defer="" src="index.js"></script> se introduce automáticamente en

el navegador para abrir la salida empaquetada index.html. Se descubre que el estilo tiene un efecto y el control. la unidad también emite normalmente: