接续上文：webpack前端构建工具学习总结（三）之webpack.config.js配置文件
插件的介绍文档：https://www.npmjs.com/package/html-webpack-plugin
1.安装html-webpack-plugin插件，输入命令：npm install html-webpack-plugin --save-dev
2.在webpack.config.js文件中，引入html-webpack-plugin插件
3.输入命令：npm run webpack，编译打包
可以看到在dist/js目录下新生成了一个index.html文件，并且引入了新编译生成的两个js，但此index.html与src文件夹下面的index.html并无关系
src下面的index.html如下
4.如果在此基础上编译生成新的html，需要配置webpack.config.js里面的html插件的参数
编译打包之后，dist下的文件目录如下：
编译生成的index.html文件如下
5.但我们在平时项目中，并不希望html文件与js文件在同一级目录下，修改webpack.config.js文件中的output属性值
输入命令：npm run webpack，编译打包后的目录为
6.html-webpack-plugin的files和options属性的介绍
7.项目上线输出时引用js等的路径不能是相对地址，应使用output里面的publicPath设置域名等绝对地址前缀
8.压缩html文件，使用html-webpack-plugin参数中的minify参数进行配置
参考文档：https://github.com/kangax/html-minifier#options-quick-reference
9.根据一个模板文件生成多个html页面，并且每个页面引用不同的js文件
var htmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin插件 module.exports = { entry: {//打包的入口文件chunk，可以是一个string字符串，也可以是一个数组，还可以是一个json对象 hello: './src/script/hello.js', world: './src/script/world.js', good: './src/script/good.js' }, output: {//打包完的输出文件 path: './dist',//打包输出文件的目录 filename: 'js/[name].js',//打包输出的文件名 publicPath: 'http://www.a.com'//项目上线输出时引用js等的路径不能是相对地址，应使用output里面的publicPath设置域名等绝对地址前缀 }, plugins: [//插件 //初始化html插件 //生成多个html文件，需要初始化多个htmlWebpackPlugin插件 new htmlWebpackPlugin({ template: 'src/index.html',//模板 filename: 'hello.html',//编译后的文件名 inject: 'head',//想把脚本文件放在哪个标签内，head或者body // inject: false,//不使用默认的将几个脚本放在一起，在模板html中单独设定 title: 'this is hello.html', //页面的title，模板html可以通过引用这个变量展示到新的页面中 minify: {//压缩html collapseWhitespace: true,//去除空格 removeComments: true //去除注释 }, chunks: ['hello']//引入entry里面的哪一个chunk }), new htmlWebpackPlugin({ template: 'src/index.html',//模板 filename: 'world.html',//编译后的文件名 inject: 'head',//想把脚本文件放在哪个标签内，head或者body // inject: false,//不使用默认的将几个脚本放在一起，在模板html中单独设定 title: 'this is world.html', //页面的title，模板html可以通过引用这个变量展示到新的页面中 minify: {//压缩html collapseWhitespace: true,//去除空格 removeComments: true //去除注释 }, chunks: ['world']//引入entry里面的哪一个chunk }), new htmlWebpackPlugin({ template: 'src/index.html',//模板 filename: 'good.html',//编译后的文件名 inject: 'head',//想把脚本文件放在哪个标签内，head或者body // inject: false,//不使用默认的将几个脚本放在一起，在模板html中单独设定 title: 'this is good.html', //页面的title，模板html可以通过引用这个变量展示到新的页面中 minify: {//压缩html collapseWhitespace: true,//去除空格 removeComments: true //去除注释 }, chunks: ['good']//引入entry里面的哪一个chunk }) ] }
运行之后的目录结构如下：
并且每一个html都引用了跟自己同名的js文件
10.目前生成的引用js文件都是通过src地址引入，这样会大大增加http的请求，我们通过官网提供的方法将公用的js文件进行解析插入到页面上
文档地址：https://github.com/jantimon/html-webpack-plugin/blob/master/examples/inline/template.jade
//htmlWebpackPlugin.files.chunks.main.entry输出是带publicPath的，但compilation.assets方法需要的是相对路径，故需要substr截取，然后使用webpack提供的方法compilation.assets[].source()将这个文件的内容读出来嵌在页面head中
<!--引入除了main.js之外的需要引入的chunk文件-->
<!--<% %>为js的模板引擎的运行符，<%= %>则为js的模板引擎取值符-->
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title><%= htmlWebpackPlugin.options.title %></title> 5 <script type="text/javascript"> 6 <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %> 7 </script> 8 </head> 9 <body> 10 <% for(var k in htmlWebpackPlugin.files.chunks){ %> 11 <% if(k !== 'main'){ %> 12 <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script> 13 <% } %> 14 <% } %> 15 <div>我是body里面div的内容</div> 16 <!--我是一行注释--> 17 </body> 18 </html>
var htmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin插件 module.exports = { entry: {//打包的入口文件chunk，可以是一个string字符串，也可以是一个数组，还可以是一个json对象 hello: './src/script/hello.js', world: './src/script/world.js', good: './src/script/good.js', main: './src/script/main.js'//公用js }, output: {//打包完的输出文件 path: './dist',//打包输出文件的目录 filename: 'js/[name].js',//打包输出的文件名 publicPath: 'http://www.a.com'//项目上线输出时引用js等的路径不能是相对地址，应使用output里面的publicPath设置域名等绝对地址前缀 }, plugins: [//插件 //初始化html插件 //生成多个html文件，需要初始化多个htmlWebpackPlugin插件 new htmlWebpackPlugin({ template: 'src/index.html',//模板 filename: 'hello.html',//编译后的文件名 // inject: 'head',//想把脚本文件放在哪个标签内，head或者body inject: false,//不使用默认的将几个脚本放在一起，在模板html中单独设定 title: 'this is hello.html', //页面的title，模板html可以通过引用这个变量展示到新的页面中 // minify: {//压缩html // collapseWhitespace: true,//去除空格 // removeComments: true //去除注释 // }, chunks: ['hello','main']//引入entry里面的哪一个chunk }), new htmlWebpackPlugin({ template: 'src/index.html',//模板 filename: 'world.html',//编译后的文件名 // inject: 'head',//想把脚本文件放在哪个标签内，head或者body inject: false,//不使用默认的将几个脚本放在一起，在模板html中单独设定 title: 'this is world.html', //页面的title，模板html可以通过引用这个变量展示到新的页面中 // minify: {//压缩html // collapseWhitespace: true,//去除空格 // removeComments: true //去除注释 // }, chunks: ['world','main']//引入entry里面的哪一个chunk }), new htmlWebpackPlugin({ template: 'src/index.html',//模板 filename: 'good.html',//编译后的文件名 // inject: 'head',//想把脚本文件放在哪个标签内，head或者body inject: false,//不使用默认的将几个脚本放在一起，在模板html中单独设定 title: 'this is good.html', //页面的title，模板html可以通过引用这个变量展示到新的页面中 // minify: {//压缩html // collapseWhitespace: true,//去除空格 // removeComments: true //去除注释 // }, chunks: ['good','main']//引入entry里面的哪一个chunk }) ] }
输入命令：npm run webpack，编译打包之后就可以看到每个html页面的头部嵌入了main.js打包后的内容，在body 内部根据不同的页面引入了不同的chunk的js文件
到这里，自动化生成项目中的html页面以及html-webpack-plugin插件的一些配置参数，html页面打包的一些点都get到了。