html-webpack-plugin之配置自定義模板

weixin_34107955發表於2017-10-16
HTMLWebPlugin

主要內容：

  • inject： true | body | head |false
  • chunks：允許插入到模板中的一些chunk，不配置此項預設會將entry中所有的thunk注入到模板中。在配置多個頁面時，每個頁面注入的thunk應該是不相同的，需要通過該配置為不同頁面注入不同的thunk。
  • excludeChunks：這個與chunks配置項正好相反，用來配置不允許注入的thunk。
  1. true|body: 所有JavaScript資源插入到body元素的底部
  2. head: 所有JavaScript資源插入到head元素中。
  3. false:所有靜態資源css和JavaScript都不會注入到模板檔案中,一般需要自定義模板配置的時候使用。

一般我們基本不會設定js在head裡面，會導致最外層的例項化掛載失敗（就是查詢不到dom)。

var HtmlWebpackPlugin = require('html-webpack-plugin')
 new HtmlWebpackPlugin({
      filename: 'index.html', 
      template: 'index.html', //本地自定義模板
      inject: true|body
 })

一般形式

3369258-99b3e68b23ba89c1.png
打包結果

如果設定為false會如何？
我們可以試一下，無疑，頁面肯定是出不來的。

什麼情況下我們會設定為false呢？
我們一步步往下看

  • 配置多個html頁面
    html-webpack-plugin的一個例項生成一個html檔案，如果單頁應用中需要多個頁面入口，或者多頁應用時配置多個html時，那麼就需要例項化該外掛多次；
3369258-b90b3c4a02b232c3.png
shell-insurance-box例項

如上面所述，頁面設定了不同的模板；在專案中，我們也可以所有的頁面用同一個模板。

3369258-c1fb26aac66dbe2d.png
公用模板

除了上面這種配置方式，還有另外一種配置自定義模板的方式可以實現需求。具體的做法，藉助於模板引擎來實現，例如外掛沒有配置loader時預設支援的ejs模板引擎，下面就以ejs模板引擎為例來說明。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="keywords" content="" />
    <meta name="description" content="運營管理系統" />
     <% for (var css in htmlWebpackPlugin.files.css) { %>
    <link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
    <% } %>
</head>
<body>
<div id="app"></div>
<script>

</script>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>

</body>
</html>

htmlWebpackPlugin其實這是html-webpack-plugin外掛在生成html檔案過程中產生的資料，這些資料對html模板檔案是可用的。

<script>
var json = JSON.parse('<%= JSON.stringify(htmlWebpackPlugin)%>')
console.log(json)
</script>
3369258-1e3185ec590157b1.png
htmlWebpackPlugin物件

github相關詳細配置

相關文章