html-webpack-plugin

作用

直接為項(xiàng)目生成一個(gè)或多個(gè)HTML文件（HTML文件個(gè)數(shù)由插件實(shí)例的個(gè)數(shù)決定），并將webpack打包后輸出的所有腳本文件自動(dòng)添加到插件生成的HTML文件中。通過(guò)配置，可以將根目錄下用戶自定義的HTML文件作為插件生成HTML文件的模板。另外，還可以通過(guò)向插件傳遞參數(shù)，控制HTML文件的輸出。

用法：

  1. 第一步：在項(xiàng)目根目錄下安裝插件：
cnpm install html-webpack-plugin --save-dev
  1. 第二步：在webpack配置文件頭部require html-webpack-plugin模塊，并保存引用至htmlWebpackPlugin變量。
var htmlWebpackPlugin = require('html-webpack-plugin');
  1. 第三步：為webpack配置文件暴露的對(duì)象添加一個(gè)plugins屬性，屬性值為一個(gè)數(shù)組，將新建的html-webpack-plugin對(duì)象實(shí)例添加到數(shù)組中。若不傳入任何參數(shù)，那么插件將生成默認(rèn)的html文件。
module.exports = {
    entry: {
        main:'./src/script/main.js'
    }, 
    output: {
        path: './dist',
        filename: 'js/[name].bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin()
        ]
}
  1. 第四步：配置參數(shù)。為新建的對(duì)象實(shí)例傳入一個(gè)對(duì)象字面量參數(shù)，初始化對(duì)象實(shí)例的屬性。
module.exports = {
    ... ,
    plugins:[
        new htmlWebpackPlugin({
            filename:'index.html',
            template:'template.html', 
            inject:false,
            title:'webpack is good',
            chunks:['main']
        })
        ]
}

htmlWebpackPlugin對(duì)象

htmlWebpackPlugin對(duì)象有兩個(gè)屬性，一個(gè)是files，一個(gè)是options。files和options的屬性值都是對(duì)象。通過(guò)EJS語(yǔ)法，可以在HTML模板文件（template.html）中遍歷這兩個(gè)屬性，查看其詳情：

<% for(var key in htmlWebpackPlugin.files) { %>
    <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>    //將對(duì)象或數(shù)組轉(zhuǎn)換為JSON字符串。
<% } %>

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

遍歷后的結(jié)果如下：

"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   
    }
}

參數(shù)說(shuō)明：

  • title: title值用于生成的HTML文檔。
  • filename: 將生成的HTML寫入到該文件中。默認(rèn)寫入到index.html中。你也可以在這兒指定子目錄 (eg: assets/admin.html)。
  • template: Webpack require path 到 template中。 詳情查閱 docs
  • inject: true | 'head' | 'body' | false添加所有的靜態(tài)資源（assets）到模板文件或templateContent 。當(dāng)傳入true或'body'時(shí)，所有javascript資源將被放置到body 元素的底部。 當(dāng)傳入'head'時(shí)， 所有的腳本將被放置到head元素中。
  • favicon: 添加指定的favicon path到輸出的html文件。
  • minify: {...} | false 傳入一個(gè)html-minifier 對(duì)象選項(xiàng)來(lái)壓縮輸出的html文件。
  • hash: true | false 如果值為true，就添加一個(gè)唯一的webpack compilation hash給所有已included的 scripts 和 CSS 文件。這對(duì)緩存清除（cache busting）十分有用。
  • cache: true | false 如果為true (默認(rèn))，只要文件被更改了就emit(發(fā)表)文件。
  • showErrors: true | false如果為true (默認(rèn))，詳細(xì)的錯(cuò)誤信息將被寫入到HTML頁(yè)面。
  • chunks:允許你只添加某些chunks (e.g. only the unit-test chunk)
  • chunksSortMode: 在chunks被include到html文件中以前，允許你控制chunks 應(yīng)當(dāng)如何被排序。允許的值: 'none' | 'auto' | 'dependency' | {function} - 默認(rèn)值: 'auto'。
  • excludeChunks: 允許你跳過(guò)某些chunks (e.g. don't add the unit-test chunk)
  • xhtml: true | false 如果為true， 將 link 標(biāo)簽渲染為自閉合標(biāo)簽, XHTML compliant。 默認(rèn)是 false。

template參數(shù)

由于html-webpack-plugin直接生成的HTML文件十分簡(jiǎn)單，不能滿足項(xiàng)目需求，因此我們通常會(huì)配置template參數(shù)，將該參數(shù)值設(shè)置為我們已創(chuàng)建好的HMTL模板文件相對(duì)于根目錄的相對(duì)路徑。

    template:'template.html'

由于html-webpack-plugin支持EJS模板語(yǔ)法，因此在模板文件中，我們可以使用EJS模板語(yǔ)法來(lái)獲取htmlWebpackPlugin對(duì)象中的數(shù)據(jù)，以此來(lái)控制html的輸出。

chunks或excludeChunks參數(shù)

chunks或excludeChunks參數(shù)限定了HTML模板文件中能夠包含的打包后的腳本文件。該參數(shù)對(duì)腳本的自動(dòng)注入或手動(dòng)注入都有限定作用。

inject參數(shù)

注意下面兩種情況：

  1. 若inject值為false，那么所有打包后的腳本文件都不會(huì)被自動(dòng)添加到HTML模板文件中。此時(shí)你需要在模板文件中通過(guò)EJS語(yǔ)法，在需要的位置處，手動(dòng)添加相應(yīng)的腳本文件，若不添加，打包后的腳本文件將不會(huì)出現(xiàn)在HTML模板文件相應(yīng)的位置上。
module.exports = {
...
    plugins:[
        new htmlWebpackPlugin({
            filename:'c.html',
            template:'index.html',
            title:'this is c.html',
            inject:false,
            excludeChunks:['a','b']
        })
    ]
}
  1. 若inject未設(shè)置，或設(shè)置了非false的值，那么所有打包后的腳本文件都會(huì)被自動(dòng)添加到HTML模板文件中。在這種場(chǎng)景下，HTML模板文件中不能出現(xiàn)任何手動(dòng)添加的打包后的腳本文件。因?yàn)楹笳邥?huì)導(dǎo)致webpack報(bào)錯(cuò)或是出現(xiàn)腳本重復(fù)注入的情況。
module.exports = {
...
    plugins:[
        new htmlWebpackPlugin({
            filename:'admin.html',
            template:'index.html',
            inject:'head',
            chunks:['a','b','c']
        })
    ]
}

當(dāng)inject未設(shè)置，或設(shè)置了非false的值時(shí)：若此時(shí)HTML模板文件中已有被手動(dòng)添加的打包后的腳本文件，那么：

  • 當(dāng)該腳本文件所對(duì)應(yīng)的chunk與chunks或excludeChunks參數(shù)所限定的chunk不一致時(shí)，webpack會(huì)報(bào)錯(cuò)；
  • 當(dāng)手動(dòng)添加的位置與inject參數(shù)值所指示的位置不一致時(shí)，webpack也會(huì)報(bào)錯(cuò)。
  • 若都一致，那么手動(dòng)添加的腳本文件也會(huì)被注入到HTML模板中，從而出現(xiàn)腳本重復(fù)注入的情況。

結(jié)論：在同一HTML模板文件中，自動(dòng)添加已打包的腳本文件與手動(dòng)添加已打包的腳本文件不能并存，這兩項(xiàng)操作只能選其一。

特殊情況：使用EJS語(yǔ)法向HTML模板文件手動(dòng)添加打包后的腳本文件：

1.由于inject參數(shù)不能被同時(shí)設(shè)置為'head'和'body'，因此，當(dāng)有的打包后的腳本文件需要被添加到head標(biāo)簽，而另外的需要被添加到body標(biāo)簽中時(shí)，就需要手動(dòng)向HTML模板注入腳本。

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

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

2.為了網(wǎng)頁(yè)的加載性能，減少HTTP請(qǐng)求數(shù)，當(dāng)有的打包后的腳本文件需要被內(nèi)嵌到head標(biāo)簽中，而其余的需要以引用外部資源的方式添加到HTML模板中時(shí)，也需要手動(dòng)向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!=='main'){ %>
    <script src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script>
    <% } %>
<% } %>
</body>

生成多個(gè)HTML文件

如果我們開發(fā)的是一個(gè)多頁(yè)面應(yīng)用程序，那么我們就需要為不同的頁(yè)面生成不同的HTML文件。通過(guò)向plugins數(shù)組添加多個(gè)插件實(shí)例就可以實(shí)現(xiàn)：

module.exports = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(), // Generates default index.html 
    new HtmlWebpackPlugin({  // Also generate a test.html 
      filename: 'test.html',
      template: 'src/assets/test.html'
    })
  ]
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容