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 的作者 ...
随机推荐
- JAVA中的BIO,NIO,AIO
在了解BIO,NIO,AIO之前先了解一下IO的几个概念: 1.同步 用户进程触发IO操作并等待或者轮询的去查看IO操作是否就绪, 例如自己亲自出马持银行卡到银行取钱 2.异步 用户触发IO操作以后, ...
- Asset Catalog Help (十一)---Removing Images and Sets
Removing Images and Sets Optimize the size of an asset catalog by removing unused images or sets. 通过 ...
- java集合框架之HashSet
参考http://how2j.cn/k/collection/collection-hashset/364.html#nowhere 元素不能重复 Set中的元素,不能重复重复判断标准是: 首先看ha ...
- 使用命令把类打成jar包
测试用类 public class Hello { public static void main(String[] args) { System.out.println("hello wo ...
- UVaLive 3695 Distant Galaxy (扫描线)
题意:给平面上的 n 个点,找出一个矩形,使得边界上包含尽量多的点. 析:如果暴力那么就是枚举上下边界,左右边界,还得统计个数,时间复杂度太高,所以我们考虑用扫描线来做,枚举上下边界, 然后用其他方法 ...
- UVa 12105 Bigger is Better (DP)
题意:用不超过 n 根火柴,组成一个尽可能大的数. 析:很明显的一个DP题,首先不难想到这个dp[i][j] 表示前 i 根火柴,所能拼出的取模 m 为 j 的数,状态转移方程也很好写, dp[i][ ...
- HDU - 4535 ZZULI 1867: 礼上往来【错位排序】
1867: 礼上往来 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 216 Solved: 65 SubmitStatusWeb Board Desc ...
- C#中var关键字用法分析
原文连接 本文实例分析了C#中var关键字用法.分享给大家供大家参考.具体方法如下: C#关键字是伴随着.NET 3.5以后,伴随着匿名函数.LINQ而来, 由编译器帮我们推断具体的类型.总体来说,当 ...
- CodeForces 586D【BFS】
题意: s是这个人开始位置:连续相同大写字母是 Each of the k trains,相应的火车具有相应的字母: '.' 代表空: 有个人在最左列,上面有连续字母代表的火车,火车从左边出去的话,会 ...
- 2014-5-16 NOIP模拟赛
Problem 1 抓牛(catchcow.cpp/c/pas) [题目描述] 农夫约翰被通知,他的一只奶牛逃逸了!所以他决定,马上出发,尽快把那只奶牛抓回来． 他们都站在数轴上．约翰在N(O≤N≤1 ...