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 的作者 ...
随机推荐
- SetConsoleCtrlHandler() -- 设置控制台信号处理函数
http://www.groad.net/bbs/thread-8253-1-1.html 当你在命令行里工作时,经常会输入 Ctrl-C 这个组合键以停止程序的运行.SetConsoleCtrlHa ...
- CodeForces Gym 100685I Innovative Business (贪心)
题意:给定一条路的长和宽,然后给你瓷砖的长和宽,你只能横着或者竖着铺,也可以切成片,但是每条边只能对应一条边,问你最少要多少瓷砖. 析:先整块整块的放,然后再考虑剩下部分,剩下的再分成3部分,先横着, ...
- Xcode10更新报错：library not found for -lstdc++.6.0.9
转载链接!:https://blog.csdn.net/timtian008/article/details/82792629 由于iPhone X Max 及iOS12系统的到来,必须升级xcode ...
- 序列化框架MJExtension详解 + iOS ORM框架
当开发中你的模型中属性名称和 字典(JSON/XML) 中的key 不能一一对应时, 或者当字典中嵌套了多层字典数组时..., 以及教你如何用 MJExtension 配置类来统一管理你的模型配置, ...
- PUSH 和 远程推送
1. UIApplacation向 APNS 注册 push notification 服务 (1) 应用程序要支持推送服务, 在网页里面配置 http://developer.apple.com/ ...
- 【BZOJ4548】小奇的糖果
→原题传送门←(by Hzwer) 「题目背景」 小奇不小心让糖果散落到了地上,它对着满地的彩色糖果胡思乱想. 「问题描述」 有 N 个彩色糖果在平面上.小奇想在平面上取一条水平的线段,并拾起它上方或 ...
- 用shell脚本监控MySQL主从同步
企业面试题1:(生产实战案例):监控MySQL主从同步是否异常,如果异常,则发送短信或者邮件给管理员.提示:如果没主从同步环境,可以用下面文本放到文件里读取来模拟:阶段1:开发一个守护进程脚本每30秒 ...
- mybatis-trim标签说明
trim标签使用1.trim 有四个属性 2.prefix,suffix 表示在trim标签包裹的部分的前面或者后面添加内容(注意:是没有prefixOverrides,suffixOverrides ...
- A - Musical Theme + 二分
#include <bits/stdc++.h> using namespace std; #define LS 2*i #define RS 2*i+1 #define UP(i,x,y ...
- 快速理解JavaScript面向对象编程—原型
总的来说js语言就是门面向对象编程的语言,对象这个概念几乎贯穿了整个js的学习. 对象 创建对象两种方法:(若要生成对象实例必须调用构造函数) 1.var obj = {name:"jer& ...