本篇內(nèi)容主要講解“webpack中如何壓縮打包html資源”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“webpack中如何壓縮打包html資源”吧!

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了韶山免費(fèi)建站歡迎大家使用！

為什么需要打包html資源

寫代碼時引入的是src下面的js文件，經(jīng)過webpack打包后，形成了一個入口文件，此時html中js文件的名稱和路徑就不對了，所以需要webpack打包，把html中引入js文件的路徑替換了。

用webpack打包html的好處有：

（1）可以自動將打包后的js文件引入html

（2）html打包后依然會生成在build文件夾下和打包后的js文件放在一起，這樣上線的時候我們只需要將打包生成的文件夾一起拷貝到上線環(huán)境就可以了

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

webpack中怎么壓縮打包html資源

1、安裝插件

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

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

npm install html-webpack-plugin -D

這個插件的作用：

• 默認(rèn)在出口下創(chuàng)建一個html文件，然后導(dǎo)入所有的JS/CSS資源

• 我們也可以自己指定一個html文件，在此html文件中加入資源

2、webpack.config.js配置

安裝好html-webpack-plugin插件后，需要在webpack.config.js文件中進(jìn)行配置：

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

確保入口模板文件的路徑和文件名與配置一致，然后可以編譯。

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

面對需要編譯出多個HTML文件，且文件需要引入不同的JS文件，但默認(rèn)情況下，打包后的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", // 打包到模板的相對或絕對路徑 （打包目標(biāo)）
      title: '首頁', // 用于生成的HTML文檔的標(biāo)題
      hash: true,//true則將唯一的webpack編譯哈希值附加到所有包含的腳本和CSS文件中。主要用于清除緩存,
      minify: {  // 壓縮html
        collapseWhitespace: true, // 折疊空白區(qū)域
        keepClosingSlash: true,  // 保持閉合間隙
        removeComments: true,   // 移除注釋
        removeRedundantAttributes: true, // 刪除冗余屬性
        removeScriptTypeAttributes: true,  // 刪除Script腳本類型屬性
        removeStyleLinkTypeAttributes: true, // 刪除樣式鏈接類型屬性
        useShortDoctype: true, // 使用短文檔類型
        preserveLineBreaks: true, // 保留換行符
        minifyCSS: true, // 壓縮文內(nèi)css
        minifyJS: true, // 壓縮文內(nèi)js
      }
    }),
  ],
...

2、此時我們的index.html

  
    
    
    
    
  
  
    
      html 打包配置