聊聊webpack怎麼壓縮打包html資源

作者：Eve Cole 更新時間：2022-08-17 16:36:27

webpack怎麼壓縮打包html資源？以下這篇文章就來跟大家簡單介紹一下webpack壓縮打包html資源的方法，希望對大家有幫助！

為什麼需要打包html資源

寫程式碼時引入的是src下面的js文件，經過webpack打包後，形成了一個入口文件，此時html中js文件的名稱和路徑就不對了，所以需要webpack打包，把html中引入js檔案的路徑替換了。

用webpack打包html的好處有：

（1）可以自動將打包後的js檔案引入html

（2）html打包後依然會產生在build資料夾下和打包後的js檔案放在一起，這樣上線的時候我們只需要將打包產生的資料夾一起拷貝到上線環境就可以了

（3）會幫我們壓縮html文件

webpack中怎麼壓縮打包html資源

1、安裝插件

webpack原生只能理解JS和JSON文件，要支援打包其他類型的文件，都需要安裝相應的插件或loader。

如果我們需要打包HTML文件，首先需要安裝html-webpack-plugin插件：

npm install html-webpack-plugin -D

這個插件的作用：

默認在出口下創建一個html文件，然後導入所有的JS/CSS資源
我們也可以自行指定一個html文件，在此html檔案中加入資源

2、webpack.config.js配置

安裝好html-webpack-plugin插件後，需要在webpack.config.js檔案中進行設定：

// ...
 // 1. 引入插件const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   // ...
   // 2. 在plugins中設定插件plugins: [
     new HtmlWebpackPlugin({
       template: 'index.html', // 指定入口範本檔案（相對於專案根目錄）
       filename: 'index.html', // 指定輸出檔名和位置（相對於輸出目錄）
       // 關於插件的其他項目配置，可以查看插件官方文件})
   ]
 }

詳細設定連結： https://www.npmjs.com/package/html-webpack-plugin

確保入口範本檔案的路徑和檔案名稱與設定一致，然後可以編譯。

3.多JS入口和多HTML情況的配置

面對需要編譯出多個HTML文件，且文件需要引入不同的JS文件，但預設情況下，打包後的HTML文件會引入所有打包後的JS文件，我們可以指定chunk來分配JS。

const path = require('path');
 // 1. 引入插件const HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = {
   // ...
   // 2. 設定JS入口(多入口)
   entry: {
     vendor: ['./src/jquery.min.js', './src/js/common.js'],
     index: './src/index.js',
     cart: './src/js/cart.js'
   },
   // 配置出口output: {
     filename: '[name].js',
     path: path.resolve(__dirname, 'build/js')
   },
   // 3. 設定插件plugins: [
     new HtmlWebpackPugin({
       template: 'index.html',
       filename: 'index.html',
       // 透過chunk來指定引入哪些JS檔chunk: ['index', 'vendor']
     }),
     // 需要編譯多少個HTML，就需要new幾次插件new HtmlWebpackPlugin({
       template: './src/cart.html',
       filename: 'cart.html',
       chunk: ['cart', 'vendor']
     })
   ]
 }

Tip: 這裡要注意的是要編譯多少個HTML文件，就要new幾次HtmlWebpackPlugin 。

上面的配置編譯成功後，輸出情況是這樣的：

build
 |__ index.html # 引入index.js和vendor.js
 |__ cart.html # 引入cart.js和vendor.js
 |__ js
      |__ vendor.js # 由jquery.min.js和common.js產生|__ index.js # 由index.js產生|__ cart.js # 由cart.js產生

壓縮打包html資源實例

1、webpack.config. js設定

const HTMLWebpackPlugin = require('html-webpack-plugin')
…
 plugins: [
    // html-webpack-plugin html 打包設定該外掛程式將為你產生一個HTML5 檔案new HTMLWebpackPlugin({
      template: "./index.html", // 打包到模板的相對或絕對路徑（打包目標）
      title: '首頁', // 用於產生的HTML文檔的標題hash: true,//true則將唯一的webpack編譯雜湊值附加到所有包含的腳本和CSS檔案中。主要用於清除快取,
      minify: { // 壓縮html
        collapseWhitespace: true, // 折疊空白區域keepClosingSlash: true, // 保持閉合間隙removeComments: true, // 移除註解removeRedundantAttributes: true, // 刪除冗餘屬性removeScriptTypeAttries: true, // 刪除腳本類型屬性true, // 刪除樣式連結類型屬性useShortDoctype: true, // 使用短文檔類型preserveLineBreaks: true, // 保留換行符minifyCSS: true, // 壓縮文內css
        minifyJS: true, // 壓縮文內js
      }
    }),
  ],
……

2、此時我們的index.html

<!DOCTYPE html>
<html lang="">
  <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">
    <title>webpackDemo</title>
  </head>
  <body>
    <div id="app">
      html 打包配置</div>
  </body>
</html>

3、此時我們的index.js

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

function add(x,y) {
 return x+y
}
console.log(add(2,3));

3、控制台webpack鍵入打包，發現打包輸出檔案多了個index.html，內容如下

<!DOCTYPE html>
<html lang="">
  <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">
    <title>webpackDemo</title>
  <script defer src="index.js"></script></head>
  <body>
    <div id="app">
      html 打包配置</div>
  </body>
</html>

<script defer="" src="index.js"></script>是自動引入的

瀏覽器打開打包輸出的index.html，發現樣式起了效果，控制太也正常輸出：