webpack - HtmlWebpackPlugin理解

時間 2019-11-19

標籤 webpack htmlwebpackplugin 理解简体版

原文原文鏈接

該插件的兩個主要做用：javascript

爲html文件中引入的外部資源如script、link動態添加每次compile後的hash，防止引用緩存的外部文件問題css
能夠生成建立html入口文件，好比單頁面能夠生成一個html文件入口，配置N個html-webpack-plugin能夠生成N個頁面入口html

html-webpack-plugin

插件的基本做用就是生成html文件。原理很簡單：java

將 webpack中`entry`配置的相關入口thunk 和 `extract-text-webpack-plugin`抽取的css樣式插入到該插件提供的`template`或者`templateContent`配置項指定的內容基礎上生成一個html文件，具體插入方式是將樣式`link`插入到`head`元素中，`script`插入到`head`或者`body`中。webpack

實例化該插件時能夠不配置任何參數，例以下面這樣：web

var HtmlWebpackPlugin = require('html-webpack-plugin')
    
webpackconfig = {
    ...
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

不配置任何選項的html-webpack-plugin插件，他會默認將webpack中的entry配置全部入口thunk和extract-text-webpack-plugin抽取的css樣式都插入到文件指定的位置。例如上面生成的html文件內容以下：數組

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  <link href="index-af150e90583a89775c77.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="common-26a14e7d42a7c7bbc4c2.js"></script>
  <script type="text/javascript" src="index-af150e90583a89775c77.js"></script></body>
</html>

固然可使用具體的配置項來定製化一些特殊的需求，那麼插件有哪些配置項呢？緩存

html-webpack-plugin配置項

插件提供的配置項比較多，經過源碼能夠看出具體的配置項以下：異步

this.options = _.extend({
    template: path.join(__dirname, 'default_index.ejs'),
    filename: 'index.html',
    hash: false,
    inject: true,
    compile: true,
    favicon: false,
    minify: false,
    cache: true,
    showErrors: true,
    chunks: 'all',
    excludeChunks: [],
    title: 'Webpack App',
    xhtml: false
  }, options);

title: 生成的html文檔的標題。配置該項，它並不會替換指定模板文件中的title元素的內容，除非html模板文件中使用了模板引擎語法來獲取該配置項值，以下ejs模板語法形式：
```
<title>{%= o.htmlWebpackPlugin.options.title %}</title>
```
filename：輸出文件的文件名稱，默認爲index.html，不配置就是該文件名；此外，還能夠爲輸出文件指定目錄位置（例如'html/index.html'）
關於filename補充兩點：ui

一、filename配置的html文件目錄是相對於webpackConfig.output.path路徑而言的，不是相對於當前項目目錄結構的。
二、指定生成的html文件內容中的link和script路徑是相對於生成目錄下的，寫路徑的時候請寫生成目錄下的相對路徑。
template: 本地模板文件的位置，支持加載器(如handlebars、ejs、undersore、html等)，如好比 handlebars!src/index.hbs；
關於template補充幾點：

一、template配置項在html文件使用file-loader時，其所指定的位置找不到，致使生成的html文件內容不是指望的內容。
二、爲template指定的模板文件沒有指定任何loader的話，默認使用ejs-loader。如template: './index.html'，若沒有爲.html指定任何loader就使用ejs-loader
templateContent: string|function，能夠指定模板的內容，不能與template共存。配置值爲function時，能夠直接返回html字符串，也能夠異步調用返回html字符串。
inject：向template或者templateContent中注入全部靜態資源，不一樣的配置值注入的位置不經相同。

一、true或者body：全部JavaScript資源插入到body元素的底部
二、head: 全部JavaScript資源插入到head元素中
三、false：全部靜態資源css和JavaScript都不會注入到模板文件中

favicon: 添加特定favicon路徑到輸出的html文檔中，這個同title配置項，須要在模板中動態獲取其路徑值
hash：true|false，是否爲全部注入的靜態資源添加webpack每次編譯產生的惟一hash值，添加hash形式以下所示：
```
html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
```
chunks：容許插入到模板中的一些chunk，不配置此項默認會將entry中全部的thunk注入到模板中。在配置多個頁面時，每一個頁面注入的thunk應該是不相同的，須要經過該配置爲不一樣頁面注入不一樣的thunk；
excludeChunks: 這個與chunks配置項正好相反，用來配置不容許注入的thunk。
chunksSortMode: none | auto| function，默認auto；容許指定的thunk在插入到html文檔前進行排序。
>function值能夠指定具體排序規則；auto基於thunk的id進行排序； none就是不排序
xhtml: true|fasle, 默認false；是否渲染link爲自閉合的標籤，true則爲自閉合標籤
cache: true|fasle, 默認true；若是爲true表示在對應的thunk文件修改後就會emit文件
showErrors: true|false，默認true；是否將錯誤信息輸出到html頁面中。這個頗有用，在生成html文件的過程當中有錯誤信息，輸出到頁面就能看到錯誤相關信息便於調試。

minify: {....}|false；傳遞 html-minifier 選項給 minify 輸出，false就是不使用html壓縮。下面的是一個用於配置這些屬性的一個例子：

    new HtmlWebpackPlugin({
          title:'rd平臺',
          template: 'entries/index.html', // 源模板文件
          filename: './index.html', // 輸出文件【注意：這裏的根路徑是module.exports.output.path】
          showErrors: true,
          inject: 'body',
          chunks: ["common",'index']
      })

配置多個html頁面

html-webpack-plugin的一個實例生成一個html文件，若是單頁應用中須要多個頁面入口，或者多頁應用時配置多個html時，那麼就須要實例化該插件屢次；

即有幾個頁面就須要在webpack的plugins數組中配置幾個該插件實例：

var main = ["index", "submit", "success", "address", "address-edit"]
plugins:[
...main.map(res => {
            return new HtmlWebpackPlugin({
                template: resolve(`../src/${res}.html`),
                filename: `./${res}.html`, //`./${res}.[chunkhash:6].html`,
                chunks: [
                    'vendor', `${res}`
                ],
                //hash: true,
                cache: false,
                minify: {
                    // removeComments: true,
                    // collapseWhitespace: false
                    removeComments: process.env.NODE_ENV ===  'development' ? false : true,
                    collapseWhitespace: process.env.NODE_ENV ===  'development' ? false : true,
                    conservativeCollapse: process.env.NODE_ENV ===  'development' ? false : true
                }
            })
        })
]

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。