搜尋
首頁web前端html教學html-webpack-plugin的程式碼分析詳解

作用

直接为项目生成一个或多个HTML文件(HTML文件个数由插件实例的个数决定),并将webpack打包后输出的所有脚本文件自动添加到插件生成的HTML文件中。通过配置,可以将根目录下用户自定义的HTML文件作为插件生成HTML文件的模板。另外,还可以通过向插件传递参数,控制HTML文件的输出。

用法:

  1. 第一步:在项目根目录下安装插件:

    cnpm install html-webpack-plugin --save-dev
  2. 第二步:在webpack配置文件头部require html-webpack-plugin模块,并保存引用至htmlWebpackPlugin变量

    var htmlWebpackPlugin = require('html-webpack-plugin');
  3. 第三步:为webpack配置文件暴露的对象添加一个plugins属性,属性值为一个数组,将新建的html-webpack-plugin对象实例添加到数组中。若不传入任何参数,那么插件将生成默认的html文件。

    module.exports = {
     entry: {
         main:'./src/script/main.js'
     }, 
     output: {
         path: './dist',
         filename: 'js/[name].bundle.js'
     },
     plugins:[
         new htmlWebpackPlugin()
         ]
    }
  4. 第四步:配置参数。为新建的对象实例传入一个对象字面量参数,初始化对象实例的属性。

    module.exports = {
     ... ,
     plugins:[
         new htmlWebpackPlugin({
             filename:'index.html',
             template:'template.html', 
             inject:false,
             title:'webpack is good',
             chunks:['main']
         })
         ]
    }

htmlWebpackPlugin对象

htmlWebpackPlugin对象有两个属性,一个是files,一个是options。files和options的属性值都是对象。通过EJS语法,可以在HTML模板文件(template.html)中遍历这两个属性,查看其详情:

<% for(var key in htmlWebpackPlugin.files) { %>
    <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>    //将对象或数组转换为JSON字符串。
<% } %>

<% for(var key in htmlWebpackPlugin.options) { %>
    <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.options[key]) %>    
<% } %>

遍历后的结果如下:

"htmlWebpackPlugin": {
  "files": {
    publicPath : "", 
    "css": [],
    "js": [ "js/main.ae8647e767cd76e54693.bundle.js"],
    "chunks": {
      "main": {
        "size":23,
        "entry": "js/main.ae8647e767cd76e54693.bundle.js", 
        "css": [],
        "hash":"ae8647e767cd76e54693",
      }
    },
    manifest : ""
  },
  "options":{
        template : "C:\\dev\\webpack-demo\\node_modules\\.2.28.0@html-webpack-plugin\\lib\\loader.js!c:\\dev\\webpack-demo\\index.html",    
    filename : "index.html",    
    hash : false,    
    inject : false,    
    compile : true,    
    favicon : false,    
    minify : false,        
    cache : true,    
    showErrors : true,    
    chunks : ["main"],    
    excludeChunks : [],    
    title : "webpack is good",    
    xhtml : false    
    }
}

参数说明:

  • title: title值用于生成的HTML文档。

  • filename: 将生成的HTML写入到该文件中。默认写入到index.html中。你也可以在这儿指定子目录 (eg: assets/admin.html)。

  • template: Webpack require path 到 template中。 详情查阅 docs

  • inject: true | 'head' | 'body' | false添加所有的静态资源(assets)到模板文件或templateContent 。当传入true'body'时,所有javascript资源将被放置到body 元素的底部。 当传入'head'时, 所有的脚本将被放置到head元素中。

  • favicon: 添加指定的favicon path到输出的html文件。

  • minify: {...} | false 传入一个html-minifier 对象选项来压缩输出的html文件。

  • hash: true | false 如果值为true,就添加一个唯一的webpack compilation hash给所有已included的 scripts 和 CSS 文件。这对缓存清除(cache busting)十分有用。

  • cache: true | false 如果为true (默认),只要文件被更改了就emit(发表)文件。

  • showErrors: true | false如果为true (默认),详细的错误信息将被写入到HTML页面。

  • chunks:允许你只添加某些chunks (e.g. only the unit-test chunk)

  • chunksSortMode: 在chunks被include到html文件中以前,允许你控制chunks 应当如何被排序。允许的值: 'none' | 'auto' | 'dependency' | {function} - 默认值: 'auto'

  • excludeChunks: 允许你跳过某些chunks (e.g. don't add the unit-test chunk)

  • xhtml: true | false 如果为true, 将 link 标签渲染为自闭合标签, XHTML compliant。 默认是 false。

template参数

由于html-webpack-plugin直接生成的HTML文件十分简单,不能满足项目需求,因此我们通常会配置template参数,将该参数值设置为我们已创建好的HMTL模板文件相对于根目录的相对路径。

    template:&#39;template.html&#39;

由于html-webpack-plugin支持EJS模板语法,因此在模板文件中,我们可以使用EJS模板语法来获取htmlWebpackPlugin对象中的数据,以此来控制html的输出。

chunks或excludeChunks参数

chunks或excludeChunks参数限定了HTML模板文件中能够包含的打包后的脚本文件。该参数对脚本的自动注入或手动注入都有限定作用。

inject参数

注意下面两种情况:

  1. 若inject值为false,那么所有打包后的脚本文件都不会被自动添加到HTML模板文件中。此时你需要在模板文件中通过EJS语法,在需要的位置处,手动添加相应的脚本文件,若不添加,打包后的脚本文件将不会出现在HTML模板文件相应的位置上。

    module.exports = {
    ...
     plugins:[
         new htmlWebpackPlugin({
             filename:&#39;c.html&#39;,
             template:&#39;index.html&#39;,
             title:&#39;this is c.html&#39;,
             inject:false,
             excludeChunks:[&#39;a&#39;,&#39;b&#39;]
         })
     ]
    }
  2. 若inject未设置,或设置了非false的值,那么所有打包后的脚本文件都会被自动添加到HTML模板文件中。在这种场景下,HTML模板文件中不能出现任何手动添加的打包后的脚本文件。因为后者会导致webpack报错或是出现脚本重复注入的情况。

    module.exports = {
    ...
     plugins:[
         new htmlWebpackPlugin({
             filename:&#39;admin.html&#39;,
             template:&#39;index.html&#39;,
             inject:&#39;head&#39;,
             chunks:[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;]
         })
     ]
    }

当inject未设置,或设置了非false的值时:若此时HTML模板文件中已有被手动添加的打包后的脚本文件,那么:

  • 当该脚本文件所对应的chunk与chunks或excludeChunks参数所限定的chunk不一致时,webpack会报错;

  • 当手动添加的位置与inject参数值所指示的位置不一致时,webpack也会报错。

  • 若都一致,那么手动添加的脚本文件也会被注入到HTML模板中,从而出现脚本重复注入的情况。

结论:在同一HTML模板文件中,自动添加已打包的脚本文件与手动添加已打包的脚本文件不能并存,这两项操作只能选其一。

特殊情况:使用EJS语法向HTML模板文件手动添加打包后的脚本文件:

1.由于inject参数不能被同时设置为'head'和'body',因此,当有的打包后的脚本文件需要被添加到head标签,而另外的需要被添加到body标签中时,就需要手动向HTML模板注入脚本。

<head>
    ...
    <script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
</head>

<body>
<% for(var k in htmlWebpackPlugin.files.chunks){ %>
    <% if(k!==&#39;main&#39;){ %>
    <script src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script>
    <% } %>
<% } %>
</body>

2.为了网页的加载性能,减少HTTP请求数,当有的打包后的脚本文件需要被内嵌到head标签中,而其余的需要以引用外部资源的方式添加到HTML模板中时,也需要手动向HTML模板注入脚本。

<head>
    ...
    <script type="text/javascript" src="<%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>"></script>
</head>

<body>
<% for(var k in htmlWebpackPlugin.files.chunks){ %>
    <% if(k!==&#39;main&#39;){ %>
    <script src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script>
    <% } %>
<% } %>
</body>

生成多个HTML文件

如果我们开发的是一个多页面应用程序,那么我们就需要为不同的页面生成不同的HTML文件。通过向plugins数组添加多个插件实例就可以实现:

module.exports = {
  entry: &#39;index.js&#39;,
  output: {
    path: &#39;dist&#39;,
    filename: &#39;index_bundle.js&#39;
  },
  plugins: [
    new HtmlWebpackPlugin(), // Generates default index.html 
    new HtmlWebpackPlugin({  // Also generate a test.html 
      filename: &#39;test.html&#39;,
      template: &#39;src/assets/test.html&#39;
    })
  ]
}

       

以上是html-webpack-plugin的程式碼分析詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
HTML的未來:網絡設計的發展和趨勢HTML的未來:網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述HTML與CSS vs. JavaScript:比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML:是編程語言還是其他?HTML:是編程語言還是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

HTML:建立網頁的結構HTML:建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站:HTML的力量從文本到網站:HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言,通過標籤和屬性定義網頁結構和內容。 1)HTML通過標籤組織文檔結構,如、。 2)瀏覽器解析HTML構建DOM並渲染網頁。 3)HTML5的新特性如、、增強了多媒體功能。 4)常見錯誤包括標籤未閉合和屬性值未加引號。 5)優化建議包括使用語義化標籤和減少文件大小。

了解HTML,CSS和JavaScript:初學者指南了解HTML,CSS和JavaScript:初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色:構建Web內容HTML的角色:構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容,使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼:仔細觀察術語HTML和代碼:仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent,而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1)htmldefineswebpagertuctureduseTags.2)“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境