html-webpack-plugin用法全解

本文只在我的博客和 SegmentFault 社區我的專欄發表，轉載請註明出處
我的博客: https://zengxiaotao.github.io
SegmentFault 我的專欄: https://segmentfault.com/blog...

html-webpack-plugin 可能用過的 webpack 的童鞋都用過這個 plugin ,就算沒用過可能也聽過。咱們在學習webpack的時候，可能常常會看到這樣的一段代碼。

// webpack.config.js
module.exports = {
    entry: path.resolve(__dirname, './app/index.js'),
    output:{
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js'
    }
    ...
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

以後在終端輸入 webpack 命令後

webpack

你會神奇的看到在你的 build 文件夾會生成一個 index.html 文件和一個 bundle.js 文件，並且 index.html 文件中自動引用 webpack 生成的 bundle.js 文件。

全部的這些都是 html-webpack-plugin 的功勞。它會自動幫你生成一個 html 文件，而且引用相關的 assets 文件(如 css, js)。

本身在六月第一次接觸前端自動化構建，學習 webpack 和 react 時，曾經簡單使用過這個插件，但也只是用了常見的幾個選項，今天就跟着官方文檔走一走，看看它的全部用法。

title

顧名思義，設置生成的 html 文件的標題。

filename

也沒什麼說的，生成 html 文件的文件名。默認爲 index.html.

template

根據本身的指定的模板文件來生成特定的 html 文件。這裏的模板類型能夠是任意你喜歡的模板，能夠是 html, jade, ejs, hbs, 等等，可是要注意的是，使用自定義的模板文件時，須要提早安裝對應的 loader， 不然webpack不能正確解析。以 jade 爲例。

npm install jade-loader --save-dev

// webpack.config.js
...
loaders: {
    ...
    {
        test: /\.jade$/,
        loader: 'jade'
    }
}
plugins: [
    new HtmlWebpackPlugin({
        ...
        jade: 'path/to/yourfile.jade'
    })
]

最終在build文件夾內會生成一個 yourfile.html 和 bundle.js 文件。如今咱們再回頭來看看以前將的 title 屬性。

若是你既指定了 template 選項，又指定了 title 選項，那麼webpack 會選擇哪個？ 事實上，這時候會選擇你指定的模板文件的 title, 即便你的模板文件中未設置 title。

那麼 filename 呢，是否也會覆蓋，其實不是，會以指定的 filename 做爲文件名。

inject

注入選項。有四個選項值 true, body, head, false.

• true

  • 默認值，script標籤位於html文件的 body 底部

• body

  • 同 true

• head

  • script 標籤位於 head 標籤內

• false

  • 不插入生成的 js 文件，只是單純的生成一個 html 文件

favicon

給生成的 html 文件生成一個 favicon。屬性值爲 favicon 文件所在的路徑名。

// webpack.config.js
...
plugins: [
    new HtmlWebpackPlugin({
        ...
        favicon: 'path/to/yourfile.ico'
    }) 
]

生成的 html 標籤中會包含這樣一個 link 標籤

<link rel="shortcut icon" href="example.ico">

同 title 和 filename 同樣，若是在模板文件指定了 favicon，會忽略該屬性。

minify

minify 的做用是對 html 文件進行壓縮，minify 的屬性值是一個壓縮選項或者 false 。默認值爲false, 不對生成的 html 文件進行壓縮。來看看這個壓縮選項。

html-webpack-plugin 內部集成了 html-minifier ,這個壓縮選項同 html-minify 的壓縮選項徹底同樣，
看一個簡單的例子。

// webpack.config.js
...
plugins: [
    new HtmlWebpackPlugin({
        ...
        minify: {
            removeAttributeQuotes: true // 移除屬性的引號
        }
    })
]

<!-- 原html片斷 -->
<div id="example" class="example">test minify</div>

<!-- 生成的html片斷 -->
<div id=example class=example>test minify</div>

hash

hash選項的做用是 給生成的 js 文件一個獨特的 hash 值，該 hash 值是該次 webpack 編譯的 hash 值。默認值爲 false 。一樣看一個例子。

// webpack.config.js
plugins: [
    new HtmlWebpackPlugin({
        ...
        hash: true
    })
]

<script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>

執行 webpack 命令後，你會看到你的生成的 html 文件的 script 標籤內引用的 js 文件，是否是有點變化了。
bundle.js 文件後跟的一串 hash 值就是這次 webpack 編譯對應的 hash 值。

$ webpack
Hash: 22b9692e22e7be37b57e
Version: webpack 1.13.2

cache

默認值是 true。表示只有在內容變化時才生成一個新的文件。

showErrors

showErrors 的做用是，若是 webpack 編譯出現錯誤，webpack會將錯誤信息包裹在一個 pre 標籤內，屬性的默認值爲 true ，也就是顯示錯誤信息。

chunks

chunks 選項的做用主要是針對多入口(entry)文件。當你有多個入口文件的時候，對應就會生成多個編譯後的 js 文件。那麼 chunks 選項就能夠決定是否都使用這些生成的 js 文件。

chunks 默認會在生成的 html 文件中引用全部的 js 文件，固然你也能夠指定引入哪些特定的文件。

看一個小例子。

// webpack.config.js
entry: {
    index: path.resolve(__dirname, './src/index.js'),
    index1: path.resolve(__dirname, './src/index1.js'),
    index2: path.resolve(__dirname, './src/index2.js')
}
...
plugins: [
    new HtmlWebpackPlugin({
        ...
        chunks: ['index','index2']
    })
]

執行 webpack 命令以後，你會看到生成的 index.html 文件中，只引用了 index.js 和 index2.js

...
<script type=text/javascript src=index.js></script>
<script type=text/javascript src=index2.js></script>

而若是沒有指定 chunks 選項，默認會所有引用。

excludeChunks

弄懂了 chunks 以後，excludeChunks 選項也就好理解了，跟 chunks 是相反的，排除掉某些 js 文件。 好比上面的例子，其實等價於下面這一行

...
excludeChunks: ['index1.js']

chunksSortMode

這個選項決定了 script 標籤的引用順序。默認有四個選項，'none', 'auto', 'dependency', '{function}'。

• 'dependency' 不用說，按照不一樣文件的依賴關係來排序。

• 'auto' 默認值，插件的內置的排序方式，具體順序這裏我也不太清楚...

• 'none' 無序？ 不太清楚...

• {function} 提供一個函數？可是函數的參數又是什麼? 不太清楚...

若是有使用過這個選項或者知道其具體含義的同窗，還請告知一下。。。

xhtml

一個布爾值，默認值是 false ，若是爲 true ,則以兼容 xhtml 的模式引用文件。

總結

以上，就總結完了傳入 new HtmlWebpackPlugin() 的選項，瞭解所有選項的含義後，能夠在項目構建時更靈活的使用。

全文完