歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > HTML >
最近在react項目中初次用到了html-webapck-plugin插件,用到該插件的兩個主要作用:
 
為html文件中引入的外部資源如script、link動態添加每次compile后的hash,防止引用緩存的外部文件問題
 
可以生成創建html入口文件,比如單頁面可以生成一個html文件入口,配置N個html-webpack-plugin可以生成N個頁面入口
 
有了這種插件,那么在項目中遇到類似上面的問題都可以輕松的解決。
 
在本人項目中使用html-webpack-plugin,由于對該插件不太熟悉,開發過程中遇到這樣或者那樣的問題,下面就來說說這個插件。
 
html-webpack-plugin
插件的基本作用就是生成html文件。原理很簡單:
 
將 webpack中`entry`配置的相關入口chunk  和  `extract-text-webpack-plugin`抽取的css樣式   插入到該插件提供的`template`或者`templateContent`配置項指定的內容基礎上生成一個html文件,具體插入方式是將樣式`link`插入到`head`元素中,`script`插入到`head`或者`body`中。
實例化該插件時可以不配置任何參數,例如下面這樣:
 
var HtmlWebpackPlugin = require('html-webpack-plugin')
    
webpackconfig = {
    ...
    plugins: [
        new HtmlWebpackPlugin()
    ]
}
不配置任何選項的html-webpack-plugin插件,他會默認將webpack中的entry配置所有入口thunk和extract-text-webpack-plugin抽取的css樣式都插入到文件指定的位置。例如上面生成的html文件內容如下:
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  <link href="index-af150e90583a89775c77.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="common-26a14e7d42a7c7bbc4c2.js"></script>
  <script type="text/javascript" src="index-af150e90583a89775c77.js"></script></body>
</html>
當然可以使用具體的配置項來定制化一些特殊的需求,那么插件有哪些配置項呢?
 
html-webpack-plugin配置項
插件提供的配置項比較多,通過源碼可以看出具體的配置項如下:
 
this.options = _.extend({
    template: path.join(__dirname, 'default_index.ejs'),
    filename: 'index.html',
    hash: false,
    inject: true,
    compile: true,
    favicon: false,
    minify: false,
    cache: true,
    showErrors: true,
    chunks: 'all',
    excludeChunks: [],
    title: 'Webpack App',
    xhtml: false
  }, options);
title: 生成的html文檔的標題。配置該項,它并不會替換指定模板文件中的title元素的內容,除非html模板文件中使用了模板引擎語法來獲取該配置項值,如下ejs模板語法形式:
<title>{%= o.htmlWebpackPlugin.options.title %}</title>
filename:輸出文件的文件名稱,默認為index.html,不配置就是該文件名;此外,還可以為輸出文件指定目錄位置(例如'html/index.html')
 
**關于filename補充兩點:**
1、filename配置的html文件目錄是相對于webpackConfig.output.path路徑而言的,不是相對于當前項目目錄結構的。
2、指定生成的html文件內容中的link和script路徑是相對于生成目錄下的,寫路徑的時候請寫生成目錄下的相對路徑。
 
template: 本地模板文件的位置,支持加載器(如handlebars、ejs、undersore、html等),如比如 handlebars!src/index.hbs;
 
**關于template補充幾點:**
1、template配置項在html文件使用file-loader時,其所指定的位置找不到,導致生成的html文件內容不是期望的內容。
2、為template指定的模板文件沒有指定任何loader的話,默認使用ejs-loader。如template: './index.html',若沒有為.html指定任何loader就使用ejs-loader
 
templateContent: string|function,可以指定模板的內容,不能與template共存。配置值為function時,可以直接返回html字符串,也可以異步調用返回html字符串。
 
inject:向template或者templateContent中注入所有靜態資源,不同的配置值注入的位置不經相同。
 
1、true或者body:所有JavaScript資源插入到body元素的底部
2、head: 所有JavaScript資源插入到head元素中
3、false: 所有靜態資源css和JavaScript都不會注入到模板文件中
 
favicon: 添加特定favicon路徑到輸出的html文檔中,這個同title配置項,需要在模板中動態獲取其路徑值
 
hash:true|false,是否為所有注入的靜態資源添加webpack每次編譯產生的唯一hash值,添加hash形式如下所示:
html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
 
chunks:允許插入到模板中的一些chunk,不配置此項默認會將entry中所有的thunk注入到模板中。在配置多個頁面時,每個頁面注入的thunk應該是不相同的,需要通過該配置為不同頁面注入不同的thunk;
 
excludeChunks: 這個與chunks配置項正好相反,用來配置不允許注入的thunk。
 
chunksSortMode: none | auto| function,默認auto; 允許指定的thunk在插入到html文檔前進行排序。
>function值可以指定具體排序規則;auto基于thunk的id進行排序; none就是不排序
 
xhtml: true|fasle, 默認false;是否渲染link為自閉合的標簽,true則為自閉合標簽
 
cache: true|fasle, 默認true; 如果為true表示在對應的thunk文件修改后就會emit文件
 
showErrors: true|false,默認true;是否將錯誤信息輸出到html頁面中。這個很有用,在生成html文件的過程中有錯誤信息,輸出到頁面就能看到錯誤相關信息便于調試。
 
minify: {....}|false;傳遞 html-minifier 選項給 minify 輸出,false就是不使用html壓縮,minify具體配置參數請點擊html-minifier
 
下面的是一個用于配置這些屬性的一個例子:
 
    new HtmlWebpackPlugin({
          title:'rd平臺',
          template: 'entries/index.html', // 源模板文件
          filename: './index.html', // 輸出文件【注意:這里的根路徑是module.exports.output.path】
          showErrors: true,
          inject: 'body',
          chunks: ["common",'index']
      })
配置多個html頁面
html-webpack-plugin的一個實例生成一個html文件,如果單頁應用中需要多個頁面入口,或者多頁應用時配置多個html時,那么就需要實例化該插件多次;
 
即有幾個頁面就需要在webpack的plugins數組中配置幾個該插件實例:
 
    ...
    plugins: [
        new HtmlWebpackPlugin({
             template: 'src/html/index.html',
              excludeChunks: ['list', 'detail']
        }),
        new HtmlWebpackPlugin({
            filename: 'list.html',
            template: 'src/html/list.html',
            thunks: ['common', 'list']
        }), 
        new HtmlWebpackPlugin({
          filename: 'detail.html',
          template: 'src/html/detail.html',
           thunks: ['common', 'detail']
        })
    ]
    ...
如上例應用中配置了三個入口頁面:index.html、list.html、detail.html;并且每個頁面注入的thunk不盡相同;類似如果多頁面應用,就需要為每個頁面配置一個;
 
配置自定義的模板
不帶參數的html-webpack-plugin默認生成的html文件只是將thunk和css樣式插入到文檔中,可能不能滿足我們的需求;
 
另外,如上面所述,三個頁面指定了三個不同html模板文件;在項目中,可能所有頁面的模板文件可以共用一個,因為html-webpack-plugin插件支持不同的模板loader,所以結合模板引擎來共用一個模板文件有了可能。
 
所以,配置自定義模板就派上用場了。具體的做法,借助于模板引擎來實現,例如插件沒有配置loader時默認支持的ejs模板引擎,下面就以ejs模板引擎為例來說明;
 
例如項目中有2個入口html頁面,它們可以共用一個模板文件,利用ejs模板的語法來動態插入各自頁面的thunk和css樣式,代碼可以這樣:
 
<!DOCTYPE html>
<html style="font-size:20px">
<head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <% for (var css in htmlWebpackPlugin.files.css) { %>
    <link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
    <% } %>
</head>
<body>
<div id="app"></div>
<% 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模板文件是可用的。
 
自定義模板上下文數據
html-webpack-plugin在生成html文件的過程中,插件會根據配置生成一個對當前模板可用的特定數據,模板語法可以根據這些數據來動態生成html文件的內容。
 
那么,插件生成的特殊數據格式是什么,生成的哪些數據呢?從源碼或者其官網都給出了答案。從源碼中可以看出模板引擎具體可以訪問的數據如下:
 
var templateParams = {
        compilation: compilation,
        webpack: compilation.getStats().toJson(),
        webpackConfig: compilation.options,
        htmlWebpackPlugin: 
          files: assets,
          options: self.options
        }
      };
從中可以看出,有四個主要的對像數據。其中compilation為所有webpack插件提供的都可以訪問的一個編譯對象,此處就不太做介紹,具體可以自己查資料。下面就對剩下的三個對象數據進行說明。
 
webpack
webpack的stats對象;注意一點:
 
這個可以訪問的stats對象是htm文件生成時所對應的stats對象,而不是webpack運行完成后所對應的整個stats對象。
 
webpackConfig
webpack的配置項;通過這個屬性可以獲取webpack的相關配置項,如通過webpackConfig.output.publicPath來獲取publicPath配置。當然還可以獲取其他配置內容。
 
htmlWebpackPlugin
html-webpack-plugin插件對應的數據。它包括兩部分:
 
htmlWebpackPlugin.files: 此次html-webpack-plugin插件配置的chunk和抽取的css樣式。該files值其實是webpack的stats對象的assetsByChunkName屬性代表的值,該值是插件配置的chunk塊對應的按照webpackConfig.output.filename映射的值。例如對應上面配置插件各個屬性配置項例子中生成的數據格式如下:
"htmlWebpackPlugin": {
  "files": {
    "css": [ "inex.css" ],
    "js": [ "common.js", "index.js"],
    "chunks": {
      "common": {
        "entry": "common.js",
        "css": [ "index.css" ]
      },
      "index": {
        "entry": "index.js",
        "css": ["index.css"]
      }
    }
  }
}
這樣,就可以是用如下模板引擎來動態輸出script腳本
 
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>
htmlWebpackPlugin.options: 傳遞給插件的配置項,具體的配置項如上面插件配置項小節所描述的。
插件事件
不知道你發現沒有,html-webpack-plugin插件在插入靜態資源時存在一些問題:
 
在插入js資源只能插入head或者body元素中,不能一些插入head中,另一些插入body中
不支持在html中文件內聯*,例如在文件的某個地方用<script src="xxx.js?__inline"></script>來內聯外部腳本
為此,有人專門給插件作者提問了這個問題;對此插件作者提供了插件事件,允許其他插件來改變html文件內容。具體的事件如下:
 
Async(異步事件):
 
    * html-webpack-plugin-before-html-generation
    * html-webpack-plugin-before-html-processing
    * html-webpack-plugin-alter-asset-tags
    * html-webpack-plugin-after-html-processing
    * html-webpack-plugin-after-emit
Sync(同步事件):
 
    * html-webpack-plugin-alter-chunks
這些事件是提供給其他插件使用的,用于改變html的內容。因此,要用這些事件需要提供一個webpack插件。例如下面定義的MyPlugin插件。
 
 
function MyPlugin(options) {
  // Configure your plugin with options...
}
 
MyPlugin.prototype.apply = function(compiler) {
  // ...
  compiler.plugin('compilation', function(compilation) {
    console.log('The compiler is starting a new compilation...');
 
    compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
      htmlPluginData.html += 'The magic footer';
      callback(null, htmlPluginData);
    });
  });
 
};
 
module.exports = MyPlugin;
然后,在webpack.config.js文件中配置Myplugin信息:
 
plugins: [
  new MyPlugin({options: ''})
]
由于本人知識有限,文章有什么不對的,還請斧正~~~

如需轉載,請注明文章出處和來源網址:http://www.rs2pl.com/html/h60379.shtml

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2018-08-14 17:37 原創:DIVCSS5
本文www.rs2pl.com DIVCSS5版權所有。

久久天天躁狠狠躁夜夜躁2020