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 的作者 ...
随机推荐
- hdu5530
分治ntt 考虑从添加i,放在j位置,那么1->j是一个连通块,j+1->i和1->j不连通,那么我们可以列出式子dp[i]=∑j=1->i dp[i-j]*A(i-1,j-1 ...
- 获取access_token时却报出下列错误信息：{"errcode":40164,"errmsg":"invalid ip 61.172.68.219, not in whitelist hint: [KJZfAa0644e575]"}，以及一些其他报错
获取access_token时却报出下列错误信息:{"errcode":40164,"errmsg":"invalid ip 61.172.68.21 ...
- mfc为对话框添加启动画面
新建CwzdSplash类 CwzdSplash.h #pragma once class CWzdSplash : public CWnd { DECLARE_DYNAMIC(CWzdSplash) ...
- TwinCAT3的c++和标准c++(c++11)特性区别
1.vector不能使用花括号初始化 2.不支持cmath,需要使用TcMath.h
- Tomcat自定义classLoader加密解密
class很好反编译,所以需要对class文件先进行加密,然后使用自己的classloader进行解密并加载. [步骤] 大概分两步: 1.对class文件进行加密 2.写解密class文件并加载的c ...
- TypeScript完全解读(26课时)_16.声明合并
ts编辑器会将名字相同的多个声明合并为一个声明,合并后的声明,同时拥有多个声明的特性 example文件夹下新建merging.ts文件 定义相同名字的接口, 定义变量类型是上面的接口.,光写一个na ...
- tensorflow weight_variable going
# coding: utf-8 import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data d ...
- http协议之版本差异（2）
—————————————HTTP1.0/HTTP1.1—————————————— 建立连接方面 HTTP/1.0 每次请求都需要建立新的TCP连接,连接不能复用.HTTP/1.1 新的请求可以在上 ...
- 洛谷 - P1390 - 公约数的和 - 莫比乌斯反演 - 欧拉函数
https://www.luogu.org/problemnew/show/P1390 求 $\sum\limits_{i=1}^{n}\sum\limits_{j=1}^{m} gcd(i,j) $ ...
- 让TinyXML保存文件为UTF-8格式
TinyXML是个好东西,这个不用我多说了,我用它做过好几个项目,但这几个项目都只是从xml文件中获取信息,没有涉及到写文件,最近需要生成xml的配置文件,才注意到这个问题,那就是TinyXML似乎不 ...