聊聊webpack怎麼壓縮打包html資源-js教程-PHP中文網

首頁

web前端

js教程

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

青灯夜游

Aug 09, 2022 pm 07:44 PM

webpack

webpack中怎麼壓縮打包html資源？以下這篇文章就來跟大家簡單介紹一下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(&#39;html-webpack-plugin&#39;);
 
 module.exports = {
   // ...
   // 2. 在plugins中配置插件
   plugins: [
     new HtmlWebpackPlugin({
       template: &#39;index.html&#39;, // 指定入口模板文件（相对于项目根目录）
       filename: &#39;index.html&#39;, // 指定输出文件名和位置（相对于输出目录）
       // 关于插件的其他项配置，可以查看插件官方文档
     })
   ]
 }

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

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

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

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

 const path = require(&#39;path&#39;);
 // 1. 引入插件
 const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);
 module.exports = {
   // ...
   // 2. 配置JS入口(多入口)
   entry: {
     vendor: [&#39;./src/jquery.min.js&#39;, &#39;./src/js/common.js&#39;],
     index: &#39;./src/index.js&#39;,
     cart: &#39;./src/js/cart.js&#39;
   },
   // 配置出口
   output: {
     filename: &#39;[name].js&#39;,
     path: path.resolve(__dirname, &#39;build/js&#39;)
   },
   // 3. 配置插件
   plugins: [
     new HtmlWebpackPugin({
       template: &#39;index.html&#39;,
       filename: &#39;index.html&#39;,
       // 通过chunk来指定引入哪些JS文件
       chunk: [&#39;index&#39;, &#39;vendor&#39;]
     }),
     // 需要编译多少个HTML，就需要new几次插件
     new HtmlWebpackPlugin({
       template: &#39;./src/cart.html&#39;,
       filename: &#39;cart.html&#39;,
       chunk: [&#39;cart&#39;, &#39;vendor&#39;]
     })
   ]
 }

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(&#39;html-webpack-plugin&#39;)
...
 plugins: [
    // html-webpack-plugin  html 打包配置 该插件将为你生成一个 HTML5 文件
    new HTMLWebpackPlugin({
      template: "./index.html", // 打包到模板的相对或绝对路径 （打包目标）
      title: &#39;首页&#39;, // 用于生成的HTML文档的标题
      hash: true,//true则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中。主要用于清除缓存,
      minify: {  // 压缩html
        collapseWhitespace: true, // 折叠空白区域
        keepClosingSlash: true,  // 保持闭合间隙
        removeComments: true,   // 移除注释
        removeRedundantAttributes: true, // 删除冗余属性
        removeScriptTypeAttributes: true,  // 删除Script脚本类型属性
        removeStyleLinkTypeAttributes: 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 &#39;./../css/index.less&#39;

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，發現樣式起了效果，控制太也正常輸出：

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

##更多程式相關知識，請造訪：

程式設計影片！！

以上是聊聊webpack怎麼壓縮打包html資源的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：掘金社区。如有侵權，請聯絡admin@php.cn刪除

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。