Mari kita bicara tentang cara mengompresi dan mengemas sumber daya html di webpack

Mengapa Anda perlu mengemas sumber daya html?

Saat menulis kode, file js di bawah src dimasukkan. Setelah pengemasan webpack, file entri dibuat. Saat ini, nama dan jalur file js dalam html salah, jadi webpack perlu dipaket dan file html harus dipaketkan. Jalur ke file js yang diimpor telah diganti.

Keuntungan menggunakan webpack untuk mengemas html adalah:

(1) File js yang dikemas dapat secara otomatis dimasukkan ke dalam html

(2) Setelah html dipaket, masih akan dihasilkan di folder build dan disatukan dengan file js yang dikemas, sehingga ketika kita online Anda hanya perlu menyalin folder yang dihasilkan oleh pengemasan ke lingkungan online

(3) Ini akan membantu kita mengompresi file html

Cara mengompresi dan mengemas sumber daya html di webpack

1. Instal plug-in

secara asli hanya dapat memahami file JS dan JSON, dan harus mendukung pengemasan file lain. Semua jenis file perlu menginstal plug-in atau loader yang sesuai.

Jika kita perlu mengemas file HTML, pertama-tama kita perlu menginstal plugin html-webpack-plugin :

npm install html-webpack-plugin -D

Peran plugin ini:

• Buat file html di bawah ekspor secara default, dan kemudian mengimpor semua sumber daya JS/CSS.

• Kami juga Anda dapat menentukan sendiri file html dan menambahkan sumber daya ke file html ini.

2. Konfigurasi Webpack.config.js

Setelah menginstal plugin html-webpack-plugin , Anda perlu melakukannya konfigurasikan di file webpack.config.js :

// ...
 // 1. Perkenalkan plugin const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 modul.ekspor = {
   // ...
   // 2. Konfigurasikan plugin plugin di plugin: [
     Plugin HtmlWebpack baru({
       template: 'index.html', // Tentukan file template entri (relatif terhadap direktori root proyek)
       nama file: 'index.html', // Tentukan nama dan lokasi file keluaran (relatif terhadap direktori keluaran)
       // Untuk item konfigurasi plugin lainnya, Anda dapat melihat dokumentasi resmi plugin tersebut})
   ]
 }

Tautan konfigurasi terperinci: https://www.npmjs.com/package/html-webpack-plugin

Pastikan jalur dan nama file dari file templat entri konsisten dengan konfigurasi, lalu Anda dapat mengkompilasinya.

3. Saat mengonfigurasi beberapa entri JS dan beberapa situasi HTML

, beberapa file HTML perlu dikompilasi, dan file tersebut perlu mengimpor file JS yang berbeda. Namun, chunk default, file HTML yang dipaket akan mengimpor semua file JS yang dipaket ditentukan untuk mendistribusikan JS.

const jalur = memerlukan('jalur');
 // 1. Perkenalkan plugin const HtmlWebpackPlugin = require('html-webpack-plugin');
 modul.ekspor = {
   // ...
   // 2. Konfigurasikan entri JS (banyak entri)
   pintu masuk: {
     vendor: ['./src/jquery.min.js', './src/js/common.js'],
     indeks: './src/index.js',
     keranjang: './src/js/cart.js'
   },
   //Konfigurasi keluaran ekspor: {
     nama file: '[nama].js',
     jalur: path.resolve(__dirname, 'build/js')
   },
   // 3. Konfigurasikan plugin: [
     HtmlWebpackPugin baru({
       templat: 'index.html',
       nama file: 'index.html',
       // Gunakan potongan untuk menentukan file JS mana yang akan diimpor potongan: ['index', 'vendor']
     }),
     // Berapa banyak HTML yang perlu dikompilasi, berapa banyak plug-in baru yang dibutuhkan new HtmlWebpackPlugin({
       templat: './src/cart.html',
       nama file: 'keranjang.html',
       potongan: ['keranjang', 'penjual']
     })
   ]
 }

Tip: Yang perlu diperhatikan di sini adalah berapa banyak file HTML yang perlu Anda kompilasi, berapa kali Anda perlu HtmlWebpackPlugin baru.

Setelah konfigurasi di atas berhasil dikompilasi, maka keluarannya adalah sebagai berikut:

build
 |__ Index.html #Perkenalkan Index.js dan Vendor.js
 |__ cart.html #Perkenalkan cart.js dan vendor.js
 |__js
      |__ vendor.js # Dihasilkan oleh jquery.min.js dan common.js |__ index.js # Dihasilkan oleh index.js |__ cart.js # Dihasilkan oleh cart.js untuk

sumber daya html terkompresi dan dikemas Contoh

1, webpack. config.js konfigurasi

const HTMLWebpackPlugin = memerlukan('html-webpack-plugin')
...
 plugin: [
    // html-webpack-plugin konfigurasi pengemasan html Plug-in ini akan menghasilkan file HTML5 untuk Anda new HTMLWebpackPlugin({
      templat: "./index.html", // Jalur relatif atau absolut yang dikemas ke templat (target pengemasan)
      title: 'Home', // Judul yang digunakan untuk hash dokumen HTML yang dihasilkan: true, //true menambahkan hash kompilasi webpack unik ke semua skrip dan file CSS yang disertakan. Terutama digunakan untuk menghapus cache,
      minify: {// Kompres html
        runtuhWhitespace: benar, // Ciutkan spasi putih keepClosingSlash: benar, // Tetap tutup celah hapusKomentar: benar, // Hapus komentar hapusRedundantAttributes: benar, // Hapus atribut berlebihan hapusScriptTypeAttributes: benar, // Hapus atribut tipe skrip skrip hapusStyleLinkTypeAttributes: benar, // Hapus atribut tipe tautan gaya useShortDoctype: true, // Gunakan tipe dokumen pendek melestarikanLineBreaks: true, // Pertahankan jeda baris minifyCSS: true, // Kompres css dalam teks
        minifyJS: true, // Kompres js dalam teks
      }
    }),
  ],
...

2. Saat ini index.html kita

<!DOCTYPE html>
<htmllang="">
  <kepala>
    <meta charset="utf-8">
    <meta http-equiv="Kompatibel dengan X-UA" content="IE=Edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>webpackDemo</title>
  </kepala>
  <tubuh>
    <div id="aplikasi">
      konfigurasi pengemasan html</div>
  </tubuh>
</html>

3. Saat ini index.js kita

import './../css/index.less'

fungsi tambah(x,y) {
 kembalikan x+y
}
console.log(add(2,3));

3. Ketik paket di konsol webpack dan temukan bahwa file keluaran paket memiliki tambahan index.html, isinya sebagai berikut

<!DOCTYPE html>
<htmllang="">
  <kepala>
    <meta charset="utf-8">
    <meta http-equiv="Kompatibel dengan X-UA" content="IE=Edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>webpackDemo</title>
  <skrip tunda src="index.js"></script></head>
  <tubuh>
    <div id="aplikasi">
      konfigurasi pengemasan html</div>
  </tubuh>
</html>

<script defer="" src="index.js"></script> secara otomatis dimasukkan ke dalam

browser untuk membuka keluaran paket index.html. Ditemukan bahwa gaya memiliki efek, dan kontrol unit juga menghasilkan output secara normal: