webpack HtmlWebpackPlugin插件
前言:
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 >
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 ></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 >
53 <head>
54 <meta charset="utf-8">
55 <title>app1</title>
56 <link href="common.css" rel="stylesheet">
57 </head>
58 <body>
59 <div ></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中的值来的，是不会收到打包路径和文件的影响的谢谢客官的品尝，如有不严谨和错误地方请希望指正，祝大家工作和生活顺利 ！
- 上一篇 »webpack插件自动加css3前缀
- 下一篇 »webpack打包提取css到独立文件