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

// webpack.config.jsmodule.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" rel="external nofollow" >