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
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
})
]
}
webpack.config.js
运行之后的目录结构如下：
并且每一个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到了。
webpack前端构建工具学习总结（四）之自动化生成项目中的html页面的更多相关文章
- webpack前端构建工具学习总结（一）之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
- webpack前端构建工具学习总结（二）之loader的使用
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...
- webpack前端构建工具学习总结（三）之webpack.config.js配置文件
Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...
- Spring学习（四）在Web项目中实例化IOC容器
1.前言 前面我们讲到Spring在普通JAVA项目中的一些使用.本文将介绍在普通的Web项目中如何实例化Spring IOC容器.按照一般的思路.如果在Web中实例化Ioc容器.这不得获取Conte ...
- gulp 前端构建工具使用
gulp 前端构建工具使用 1.新建一个web h5项目 2.准备好gulpfile.js文件 (1)下载链接:https://pan.baidu.com/s/116J-BaYOMRzeJW3i_J ...
- 前端构建工具gulp使用
前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...
- 前端构建工具gulp
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...
- 前端构建工具gulp使用 (转）
http://www.cnblogs.com/starof/p/5194622.html 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 ...
- Gulp， 比Grunt更好用的前端构建工具
Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp相对于Grunt的优势 gulp.js 的作者 ...
随机推荐
- bzoj4827
FFT+数学 先开始觉得枚举c就行了,不过我naive了 事实上c是确定的,通过化简式子可以得出一个二次函数,那么c就可以解出来了. 然后把a翻转,fft一下就行了 难得的良心题 #include&l ...
- spring : springmvc常用注解标签详解（转）
新的项目,新的学习,好久没用这些注解了,同时在学习使用shiro ,lucene 等等.在网上找了些博文,感谢作者的总结和分享. 欢迎交流,言归正传: 1.@Controller 在SpringMVC ...
- Validtion
今天在使用Validation框架实现验证时,出现以上的错误.查询资料后发现“validation-config.dtd”这个文件没有导入自己的工程,才会出现这样的错误. 将从文件导入后果然解决了问题 ...
- Qt测试代码执行时间
////////////////////////////////////////////////////////////////// QString _GetIntervalTime(QTime&am ...
- CSA Round #53 (Div. 2 only) Histogram Partition（模拟）
传送门 题意 给出一个数组A,你有一个数组B(一开始全为0),询问多少次操作后B转化为A 一次操作:选择一段区间,加上某个正整数 分析 构建一个栈, 输入一个数,若当前栈空或栈顶元素比输入小,则加入栈 ...
- android通过获取摄像头照片，实时与点传输
http://blog.csdn.net/csh159/article/details/7926654/ GetIP: [html] view plain copy print? package co ...
- 三星Gear VR与Oculus Rift DK2全方位比拼
网易数码1月6日消息,Oculus Rift DK2并不是面向消费者的产品,而三星Gear VR则进入了大众市场.虽然二者有点不同,但还是值得对比一番,看看Gear VR相比当下虚拟现实领域佼佼者Oc ...
- Node.js 使用Stream的pipe(管道)方法实现文件复制
Stream模块有一个pipe方法,可以将两个流串起来,实现所有的数据自动从Readable流进入Writable流 "use strict"; const fs = requir ...
- 如何在Linux服务器上部署禅道
最近换了新的项目团队,由于新团队比较年轻化,没有实行正规的项目管理,于是我自告奋勇要为团队管理出一份力,帮助团队建立敏捷化的项目管理,经过多方考究和对比后,选择了目前较受欢迎的开源项目管理软件:禅道. ...
- PAT甲级——1126 Eulerian Path
我是先在CSDN上发布的这篇文章:https://blog.csdn.net/weixin_44385565/article/details/89155050 1126 Eulerian Path ( ...