html-webpack-plugin插件 根据模板生成多页面
1、项目目录结构为:

2、webpack.config.js配置文件为:
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//打包入口
entry: {
main: './src/js/main.js',
a: './src/js/a.js',
b: './src/js/b.js',
c: './src/js/c.js'
},
//打包后的文件
output: {
//不加__dirname 会报错
path: __dirname + '/dist',
//注意:使用[name]确保每个文件名都不重复
filename: 'js/[name]-[chunkhash].js',
//线上地址配置
publicPath:'http://cdn.com/'
},
plugins: [
new htmlWebpackPlugin({
template: 'index.html',
filename: 'a.html',
title: 'this is a.html',
//增加指定的chunks
chunks:['main','a']
}),
new htmlWebpackPlugin({
template: 'index.html',
filename: 'b.html',
title: 'this is b.html',
//增加指定的chunks
chunks:['main','b']
}),
new htmlWebpackPlugin({
template: 'index.html',
filename: 'c.html',
title: 'this is c.html',
//增加指定的chunks
chunks:['main','c']
})
]
}
3、执行命令:
npm run webpack
4.编译:


html-webpack-plugin插件 根据模板生成多页面的更多相关文章
- Java读取根据HTML模板生成HTML页面
首先,我们需要一个html模板: <html> <head> <title>###title###</title> <meta http-equi ...
- webpack(二) 根据模板生成简单的html文件
(一)使用webpack 根据模板生成HTML,首先需要安装插件 html-webpack-plugin. 在工程文件夹安装插件 命令如下: npm install html-webpack-plug ...
- html模板生成静态页面及模板分页处理
它只让你修改页面的某一部分,当然这"某一部分"是由你来确定的.美工先做好一个页面,然后我们把这个页面当作模板(要注意的是这个模板就没必要使用EditRegion3这样的代码了,这种 ...
- Ceph Zabbix plugin 插件和模板
由于Ceph项目中的 Celemeter 缺乏告警功能和监控平台的统一性要求, YY 云平台Ceph集群的监控需求,都是在团队已有的zabbix平台基础上开发完成的. 在已有的git开源项目基础上做了 ...
- 利用模板生成html页面(NVelocity)
公司的网站需要有些新闻,每次的新闻格式都是一样的,而不想每次都查询操作,所以想把这些新闻的页面保存成静态的html,之后搜索了下就找到了这个模板引擎,当然其他的模板引擎可以的,例如:Razor,自己写 ...
- 简单webpack plugin 开发
重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...
- 案例实战之如何写一个webpack plugin
案例实战之如何写一个webpack plugin 1.写一个生成打包文件目录的file.md文件 // 生成一个目录项目目录的文件夹 class FileListPlugin { constructo ...
- ASP.NET MVC 解析模板生成静态页一(RazorEngine)
简述 Razor是ASP.NET MVC 3中新加入的技术,以作为ASPX引擎的一个新的替代项.在早期的MVC版本中默认使用的是ASPX模板引擎,Razor在语法上的确不错,用起来非常方便,简洁的语法 ...
- NET MVC RazorEngine 解析模板生成静态页
ASP.NET MVC 解析模板生成静态页一(RazorEngine) 简述 Razor是ASP.NET MVC 3中新加入的技术,以作为ASPX引擎的一个新的替代项.在早期的MVC版本中默认使用的是 ...
随机推荐
- 华为S5300系列交换机V100R005SPH021升级补丁
S23_33_53-V100R005SPH021.pat 附件: 链接:https://pan.baidu.com/s/1xaEZa8hn8psHSQXrk2d9yA 密码:9b6o
- Javascript 面向对象编程(一):封装(转载)
Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果 ...
- symbol(s) not found for architecture armv7
Undefined symbols for architecture i386: “_OBJC_CLASS_$_XXX”, referenced from: objc-class-ref in XXX ...
- Ext BoxComponent
Ext.BoxComponent也是一个比较重要的基础类,它直接继承自Ext.Component,并实现了定位和控制自身大小的功能. 可以使用pageX.pageY.x.y为Ext.BoxCompon ...
- Selenium2+python自动化59-数据驱动(ddt)
前言 在设计用例的时候,有些用例只是参数数据的输入不一样,比如登录这个功能,操作过程但是一样的.如果用例重复去写操作过程会增加代码量,对应这种多组数据的测试用例,可以用数据驱动设计模式,一组数据对应一 ...
- 利用Squid + DNSPOD 搭建CDN服务器
首先下载squid for windows安装包 squid-2.7.STABLE5-bin.zip 然后解压缩,放到C盘squid目录内. 进入目录C:\squid\etc内,将所有文件的.defa ...
- 安卓下查看kmsg内核日志
cat /proc/kmsg <6>[ 2601.360] c0@A7 lm3695_early_suspend 247<6>[ 2601.380] c1@A7 gp2ap_e ...
- 如何读取抓取的wifi包内容
有密码的WIFI,WIFI的密码会生成一个临时会话密钥,这个临时会话密钥可以用来加密会话内容,也就是说.比如你在浏览网页,用有密码的WIFI,连接上以后,浏览的网页流量是加密了的,所以更安全.无密码的 ...
- C++:友元运算符重载函数
运算符重载函数:实现对象之间进行算数运算,(实际上是对象的属性之间做运算),包括+(加号).-(减号).*./.=.++.--.-(负号).+(正号) 运算符重载函数分为:普通友元运算符重载函数.成员 ...
- Objective-C:OC内部可变对象和不可变对象的深(复制)拷贝问题思考:
OC内部:可变对象和不可变对象的深(复制)拷贝问题思考: 不可变对象: 例如NSString对象,因为NSString对象是常量字符串,所以,不可以更改其内容,但是可以修改指向该字符串的指针指向 ...