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插件 根据模板生成多页面的更多相关文章

  1. Java读取根据HTML模板生成HTML页面

    首先,我们需要一个html模板: <html> <head> <title>###title###</title> <meta http-equi ...

  2. webpack(二) 根据模板生成简单的html文件

    (一)使用webpack 根据模板生成HTML,首先需要安装插件 html-webpack-plugin. 在工程文件夹安装插件 命令如下: npm install html-webpack-plug ...

  3. html模板生成静态页面及模板分页处理

    它只让你修改页面的某一部分,当然这"某一部分"是由你来确定的.美工先做好一个页面,然后我们把这个页面当作模板(要注意的是这个模板就没必要使用EditRegion3这样的代码了,这种 ...

  4. Ceph Zabbix plugin 插件和模板

    由于Ceph项目中的 Celemeter 缺乏告警功能和监控平台的统一性要求, YY 云平台Ceph集群的监控需求,都是在团队已有的zabbix平台基础上开发完成的. 在已有的git开源项目基础上做了 ...

  5. 利用模板生成html页面(NVelocity)

    公司的网站需要有些新闻,每次的新闻格式都是一样的,而不想每次都查询操作,所以想把这些新闻的页面保存成静态的html,之后搜索了下就找到了这个模板引擎,当然其他的模板引擎可以的,例如:Razor,自己写 ...

  6. 简单webpack plugin 开发

    重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...

  7. 案例实战之如何写一个webpack plugin

    案例实战之如何写一个webpack plugin 1.写一个生成打包文件目录的file.md文件 // 生成一个目录项目目录的文件夹 class FileListPlugin { constructo ...

  8. ASP.NET MVC 解析模板生成静态页一(RazorEngine)

    简述 Razor是ASP.NET MVC 3中新加入的技术,以作为ASPX引擎的一个新的替代项.在早期的MVC版本中默认使用的是ASPX模板引擎,Razor在语法上的确不错,用起来非常方便,简洁的语法 ...

  9. NET MVC RazorEngine 解析模板生成静态页

    ASP.NET MVC 解析模板生成静态页一(RazorEngine) 简述 Razor是ASP.NET MVC 3中新加入的技术,以作为ASPX引擎的一个新的替代项.在早期的MVC版本中默认使用的是 ...

随机推荐

  1. 华为S5300系列交换机V100R005SPH021升级补丁

    S23_33_53-V100R005SPH021.pat 附件: 链接:https://pan.baidu.com/s/1xaEZa8hn8psHSQXrk2d9yA  密码:9b6o

  2. Javascript 面向对象编程(一):封装(转载)

    Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果 ...

  3. symbol(s) not found for architecture armv7

    Undefined symbols for architecture i386: “_OBJC_CLASS_$_XXX”, referenced from: objc-class-ref in XXX ...

  4. Ext BoxComponent

    Ext.BoxComponent也是一个比较重要的基础类,它直接继承自Ext.Component,并实现了定位和控制自身大小的功能. 可以使用pageX.pageY.x.y为Ext.BoxCompon ...

  5. Selenium2+python自动化59-数据驱动(ddt)

    前言 在设计用例的时候,有些用例只是参数数据的输入不一样,比如登录这个功能,操作过程但是一样的.如果用例重复去写操作过程会增加代码量,对应这种多组数据的测试用例,可以用数据驱动设计模式,一组数据对应一 ...

  6. 利用Squid + DNSPOD 搭建CDN服务器

    首先下载squid for windows安装包 squid-2.7.STABLE5-bin.zip 然后解压缩,放到C盘squid目录内. 进入目录C:\squid\etc内,将所有文件的.defa ...

  7. 安卓下查看kmsg内核日志

    cat /proc/kmsg <6>[ 2601.360] c0@A7 lm3695_early_suspend 247<6>[ 2601.380] c1@A7 gp2ap_e ...

  8. 如何读取抓取的wifi包内容

    有密码的WIFI,WIFI的密码会生成一个临时会话密钥,这个临时会话密钥可以用来加密会话内容,也就是说.比如你在浏览网页,用有密码的WIFI,连接上以后,浏览的网页流量是加密了的,所以更安全.无密码的 ...

  9. C++:友元运算符重载函数

    运算符重载函数:实现对象之间进行算数运算,(实际上是对象的属性之间做运算),包括+(加号).-(减号).*./.=.++.--.-(负号).+(正号) 运算符重载函数分为:普通友元运算符重载函数.成员 ...

  10. Objective-C:OC内部可变对象和不可变对象的深(复制)拷贝问题思考:

    OC内部:可变对象和不可变对象的深(复制)拷贝问题思考:   不可变对象:  例如NSString对象,因为NSString对象是常量字符串,所以,不可以更改其内容,但是可以修改指向该字符串的指针指向 ...