html-webpack-plugin 可能用過的 webpack 的童鞋都用過這個(gè) plugin ,就算沒用過可能也聽過。我們?cè)趯W(xué)習(xí)webpack的時(shí)候，可能經(jīng)常會(huì)看到這樣的一段代碼。

// 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

你會(huì)神奇的看到在你的 build 文件夾會(huì)生成一個(gè) index.html 文件和一個(gè) bundle.js 文件，而且 index.html 文件中自動(dòng)引用 webpack 生成的 bundle.js 文件。

所有的這些都是 html-webpack-plugin 的功勞。它會(huì)自動(dòng)幫你生成一個(gè) html 文件，并且引用相關(guān)的 assets 文件(如 css, js)。

自己在六月第一次接觸前端自動(dòng)化構(gòu)建，學(xué)習(xí) webpack 和 react 時(shí)，曾經(jīng)簡(jiǎn)單使用過這個(gè)插件，但也只是用了常見的幾個(gè)選項(xiàng)，今天就跟著官方文檔走一走，看看它的所有用法。

title

顧名思義，設(shè)置生成的 html 文件的標(biāo)題。

filename

也沒什么說的，生成 html 文件的文件名。默認(rèn)為 index.html.

template

根據(jù)自己的指定的模板文件來生成特定的 html 文件。這里的模板類型可以是任意你喜歡的模板，可以是 html, jade, ejs, hbs, 等等，但是要注意的是，使用自定義的模板文件時(shí)，需要提前安裝對(duì)應(yīng)的 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文件夾內(nèi)會(huì)生成一個(gè) yourfile.html 和 bundle.js 文件。現(xiàn)在我們?cè)倩仡^來看看之前將的 title 屬性。

如果你既指定了 template 選項(xiàng)，又指定了 title 選項(xiàng)，那么webpack 會(huì)選擇哪一個(gè)？ 事實(shí)上，這時(shí)候會(huì)選擇你指定的模板文件的 title, 即使你的模板文件中未設(shè)置 title。

那么 filename 呢，是否也會(huì)覆蓋，其實(shí)不是，會(huì)以指定的 filename 作為文件名。

inject

注入選項(xiàng)。有四個(gè)選項(xiàng)值 true, body, head, false.

1. true：默認(rèn)值，script標(biāo)簽位于html文件的 body 底部
2. body：同 true
3. head：script 標(biāo)簽位于 head 標(biāo)簽內(nèi)
4. false：不插入生成的 js 文件，只是單純的生成一個(gè) html 文件
5. favicon：給生成的 html 文件生成一個(gè) favicon。屬性值為 favicon 文件所在的路徑名。

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

生成的 html 標(biāo)簽中會(huì)包含這樣一個(gè) link 標(biāo)簽

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

同 title 和 filename 一樣，如果在模板文件指定了 favicon，會(huì)忽略該屬性。

minify

minify 的作用是對(duì) html 文件進(jìn)行壓縮，minify 的屬性值是一個(gè)壓縮選項(xiàng)或者 false 。默認(rèn)值為false, 不對(duì)生成的 html 文件進(jìn)行壓縮。來看看這個(gè)壓縮選項(xiàng)。

html-webpack-plugin 內(nèi)部集成了html-minifier ,這個(gè)壓縮選項(xiàng)同 html-minify 的壓縮選項(xiàng)完全一樣，
看一個(gè)簡(jiǎn)單的例子。

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

<!-- 原h(huán)tml片段 -->
<div id="example" class="example">test minify</div>

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

hash

hash選項(xiàng)的作用是 給生成的 js 文件一個(gè)獨(dú)特的 hash 值，該 hash 值是該次 webpack 編譯的 hash 值。默認(rèn)值為 false 。同樣看一個(gè)例子。

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

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

執(zhí)行 webpack 命令后，你會(huì)看到你的生成的 html 文件的 script 標(biāo)簽內(nèi)引用的 js 文件，是不是有點(diǎn)變化了。

bundle.js 文件后跟的一串 hash 值就是此次 webpack 編譯對(duì)應(yīng)的 hash 值。

$ webpack
Hash: 22b9692e22e7be37b57e
Version: webpack 1.13.2

cache

默認(rèn)值是 true。表示只有在內(nèi)容變化時(shí)才生成一個(gè)新的文件。

showErrors

showErrors 的作用是，如果 webpack 編譯出現(xiàn)錯(cuò)誤，webpack會(huì)將錯(cuò)誤信息包裹在一個(gè) pre 標(biāo)簽內(nèi)，屬性的默認(rèn)值為 true ，也就是顯示錯(cuò)誤信息。

chunks

chunks 選項(xiàng)的作用主要是針對(duì)多入口(entry)文件。當(dāng)你有多個(gè)入口文件的時(shí)候，對(duì)應(yīng)就會(huì)生成多個(gè)編譯后的 js 文件。那么 chunks 選項(xiàng)就可以決定是否都使用這些生成的 js 文件。

chunks 默認(rèn)會(huì)在生成的 html 文件中引用所有的 js 文件，當(dāng)然你也可以指定引入哪些特定的文件。

看一個(gè)小例子。

// 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']
  })
]

執(zhí)行 webpack 命令之后，你會(huì)看到生成的 index.html 文件中，只引用了 index.js 和 index2.js

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

而如果沒有指定 chunks 選項(xiàng)，默認(rèn)會(huì)全部引用。

excludeChunks

弄懂了 chunks 之后，excludeChunks 選項(xiàng)也就好理解了，跟 chunks 是相反的，排除掉某些 js 文件。 比如上面的例子，其實(shí)等價(jià)于下面這一行

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

chunksSortMode

這個(gè)選項(xiàng)決定了 script 標(biāo)簽的引用順序。默認(rèn)有四個(gè)選項(xiàng)，'none', 'auto', 'dependency', '{function}'。

1. 'dependency' 不用說，按照不同文件的依賴關(guān)系來排序。
2. 'auto' 默認(rèn)值，插件的內(nèi)置的排序方式，具體順序這里我也不太清楚...
3. 'none' 無序？ 不太清楚...
4. {function} 提供一個(gè)函數(shù)？但是函數(shù)的參數(shù)又是什么? 不太清楚...

如果有使用過這個(gè)選項(xiàng)或者知道其具體含義的同學(xué)，還請(qǐng)告知一下。。。

xhtml

一個(gè)布爾值，默認(rèn)值是 false ，如果為 true ,則以兼容 xhtml 的模式引用文件。

總結(jié)

以上，就總結(jié)完了傳入 new HtmlWebpackPlugin() 的選項(xiàng)，了解全部選項(xiàng)的含義后，可以在項(xiàng)目構(gòu)建時(shí)更靈活的使用。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論