html-webpack-plugin如何用

本篇內容主要講解“html-webpack-plugin如何用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“html-webpack-plugin如何用”吧!

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.

1. true：默認值，script標簽位于html文件的 body 底部

2. body：同 true

3. head：script 標簽位于 head 標簽內

4. false：不插入生成的 js 文件，只是單純的生成一個 html 文件

5. favicon：給生成的 html 文件生成一個 favicon。屬性值為 favicon 文件所在的路徑名。

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

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

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

同 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}'。

1. 'dependency' 不用說，按照不同文件的依賴關系來排序。

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

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

4. {function} 提供一個函數？但是函數的參數又是什么? 不太清楚...

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

xhtml

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

到此，相信大家對“html-webpack-plugin如何用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！