前言:
webpack的plugins(插件)是其的輔助功能，主要作用是解決其loader無法實現的事情，今天將詳細介紹HtmlWebpackPlugin插件的功能，話不多少，直奔主題
作用:
1. 生成項目的主入口html文件，一般原則是單應用的話會生成一個html文件，多應用的話會生成多個對應的html文件
2. 管理生成的html中引入js,css等資源配置，一般在多應用中會體現的比較突出一些
源碼:
此處的配置項也是比較多的，以源碼為例進行簡單的介紹
1 constructor (options) { 2 // Default options 3 this.options = _.extend({ 4 template: path.join(__dirname, 'default_index.ejs'), 5 filename: 'index.html', 6 hash: false, 7 inject: true, 8 compile: true, 9 favicon: false, 10 minify: false, 11 cache: true, 12 showErrors: true, 13 chunks: 'all', 14 excludeChunks: [], 15 chunksSortMode: 'auto', 16 meta: {}, 17 title: 'Webpack App', 18 xhtml: false 19 }, options); 20 }
配置:
1. template: 本地模板的所在的文件路徑，支持的加載器有html(常用)，ejs(默認)等，如上代碼可以看到默認的是default_index.ejs文件
2. filename: 輸出的文件名稱，默認是index.html，注意: 這個文件的生成路徑是相對於webpack中output.path而言的
例子: 若output.path為dist文件夾，則
filename: 'index.html' // dist文件夾->index.html文件
filename: 'test/index.html' // dist文件夾->test文件夾->index.html
3.hash: true/false, 默認是false, 是否每次為文件中引入的靜態資源如js,css等路徑后面加上唯一的hash值，如: <script src="test.js?e44jjsdkdeiir588djjkkro8due">
4.inject: 向template中注入靜態資源的位置
true/body: js資源注入到body中
header: js資源注入到header中
false: css和js都不會注入
5.favicon: 添加特定的favicon路徑輸出到html中，需要在模板中單獨配置-{%= o.htmlWebpackPlugin.options.favicon %}
6. title: template的title屬性，需要在模板中單獨配置-<title>{%= o.htmlWebpackPlugin.options.title %}</title>
7. chunks: 允許插入到模板中的chunk，如果不配置的話則會向entry中所有的打包出來的文件引入到模板中，這個一般在多應用中經常性使用到
// enrty配置 entry: { 'app1': './src/app1/index.js', 'app2': './src/app2/index.js' },
chunks: ['app1'] // 只會將app1的chunk注入 chunks: ['app2'] // 只會將app2的chunk注入 chunks: ['app1'， 'app2'] // 會將app1和app2的chunk注入
8. excludeChunks： 與chunks功能相反
9. chunksSortMode: no/auto/function, 默認為auto, 打包文件引入到模板的順序模式
10. showErrors：false/ture, 默認為true, 是否將生成模板過程中的錯誤信息輸入到模板上
11. xhtml: false/true,默認為false, 是否渲染link標簽為自閉形式
12. templateParameters
自問自答: 看到這可能有的同學會提出疑問，看了相關提供的配置外如果說模板中想直接引用固定目錄下的固定名稱的js,css文件等那么這個插件豈不是滿足不了？。。。。答案是可以解決了，接下來引出插件的templateParameters參數配置，直接上例子方便大家了解
1 // app1.html 2 <!DOCTYPE html> 3 <html style="font-size:20px"> 4 <head> 5 <meta charset="utf-8"> 6 <title>app1</title> 7 <% for (var css in htmlWebpackPlugin.files.css) { %> 8 <link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet"> 9 <% } %> 10 </head> 11 <body> 12 <div id="app"></div> 13 <% for (var js in htmlWebpackPlugin.files.js) { 14 %> 15 <script type="text/javascript" src="<%=htmlWebpackPlugin.files.js[js] %>"></script> 16 <% } 17 %> 18 <% for (var chunk in htmlWebpackPlugin.files.chunks) { %> 19 <script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script> 20 <% } %> 21 </body> 22 </html> 23 24 // templateParameters參數配置 25 templateParameters: (compilation, assets, assetTags, options) => { 26 return { 27 compilation, 28 webpackConfig: compilation.options, 29 htmlWebpackPlugin: { 30 tags: assetTags, 31 files: { 32 css: ['common.css'], // 對應56行 33 js: ['common.js'], // 對應60行 34 chunks: { 35 common: { 36 entry: 'test/app1/index.js', // 對應61行 37 css: ['chunk.common.css'] 38 }, 39 index: { 40 entry: '/app2/index.js', // 對應62行 41 css: ['chunk.index.css'] 42 } 43 } 44 } 45 }, 46 options 47 }; 48 } 49 50 // app1.html經過上述編譯后 51 <!DOCTYPE html> 52 <html style="font-size:20px"> 53 <head> 54 <meta charset="utf-8"> 55 <title>app1</title> 56 <link href="common.css" rel="stylesheet"> 57 </head> 58 <body> 59 <div id="app"></div> 60 <script type="text/javascript" src="common.js"></script> 61 <script type="text/javascript" src="test/app1/index.js"></script> 62 <script type="text/javascript" src="/app2/index.js"></script> 63 </body> 64 </html>
注意: 打包出來的js，css的路徑地址完全是按照files中的值來的，是不會收到打包路徑和文件的影響的
謝謝客官的品嘗，如有不嚴謹和錯誤地方請希望指正，祝大家工作和生活順利 ！