溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

webpack中如何壓縮打包html資源

發(fā)布時間：2022-08-10 09:38:48 來源：億速云 閱讀：408 作者：iii 欄目：web開發(fā)

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

webpack中如何壓縮打包html資源

為什么需要打包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

<!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鍵入打包，發(fā)現(xiàn)打包輸出文件多了個index.html，內(nèi)容如下

<!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，發(fā)現(xiàn)樣式起了效果，控制太也正常輸出：

webpack中如何壓縮打包html資源

webpack中如何壓縮打包html資源

到此，相信大家對“webpack中如何壓縮打包html資源”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手