webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件

插件的介绍文档:https://www.npmjs.com/package/html-webpack-plugin

1.安装html-webpack-plugin插件,输入命令:npm install html-webpack-plugin --save-dev

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

2.在webpack.config.js文件中,引入html-webpack-plugin插件

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

3.输入命令:npm run webpack,编译打包

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

可以看到在dist/js目录下新生成了一个index.html文件,并且引入了新编译生成的两个js,但此index.html与src文件夹下面的index.html并无关系

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

src下面的index.html如下

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

4.如果在此基础上编译生成新的html,需要配置webpack.config.js里面的html插件的参数

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

编译打包之后,dist下的文件目录如下:

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

编译生成的index.html文件如下

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

5.但我们在平时项目中,并不希望html文件与js文件在同一级目录下,修改webpack.config.js文件中的output属性值

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

输入命令:npm run webpack,编译打包后的目录为

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

6.html-webpack-plugin的files和options属性的介绍

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

7.项目上线输出时引用js等的路径不能是相对地址,应使用output里面的publicPath设置域名等绝对地址前缀

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

8.压缩html文件,使用html-webpack-plugin参数中的minify参数进行配置

参考文档:https://github.com/kangax/html-minifier#options-quick-reference

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

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
})
]
}

webpack.config.js

运行之后的目录结构如下:

webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

并且每一个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的模板引擎取值符-->

 <!DOCTYPE html>
<html>
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
<script type="text/javascript">
<%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
</script>
</head>
<body>
<% for(var k in htmlWebpackPlugin.files.chunks){ %>
<% if(k !== 'main'){ %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script>
<% } %>
<% } %>
<div>我是body里面div的内容</div>
<!--我是一行注释-->
</body>
</html>

模板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
})
]
}

webpack.config.js

输入命令:npm run webpack,编译打包之后就可以看到每个html页面的头部嵌入了main.js打包后的内容,在body 内部根据不同的页面引入了不同的chunk的js文件

到这里,自动化生成项目中的html页面以及html-webpack-plugin插件的一些配置参数,html页面打包的一些点都get到了。

上一篇:第六篇 SQL Server代理深入作业步骤工作流


下一篇:XML详解一XML语法