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. Unity3D中的UnitySendMessage方法的使用

    UnitySendMessage(“string”,“string”, ***),这是方法,我们至少需要传入两个参数,第一个参数为unity中的一个gameobject名称,第二个参数为这个gameo ...

  2. mysql 3.2.49 源代码安装-redhat 5 x64

    [mysql@localhost ~]$ uname -r2.6.32 [root@localhost ~]#cp /usr/include/pthread.h /usr/include/pthrea ...

  3. mysql安装三 linux源码安装mysql5.6.22

    http://blog.csdn.net/beiigang/article/details/43053803

  4. jQuery闭包之浅见,从面向对象角度来理解

    本篇的标题虽然是"jQuery闭包之浅见...",但实际上本篇涉及的多半是javascript"闭包"相关内容,之所以写这个标题,完全是因为自己平常用jQuer ...

  5. python笔记25-mock-server之moco

    前言 mock除了用在单元测试过程中,还有一个用途,当前端开发在开发页面的时候,需要服务端提供API接口 此时服务端没开发完成,或者说没搭建测试环境,这个时候前端开发会自己mock一个api服务端,自 ...

  6. 异常:javax.el.PropertyNotFoundException: Property 'id' not found on ..........

    在后台action中查询数据库返回的UserInfo对象后 将uDisplayName传递到jsp中,jsp中用${userInfo.uDisplayName}接收值时报错: 异常:javax.el. ...

  7. plsql调用无参/有参存储过程

    --有参调用方式:declare STERMINAL ); SPROCESS NUMBER; begin sj_transfera_digi_getmapping(,,'DYH010006783031 ...

  8. LaTeX快速入门-蔡炎龙

    蔡老师的这个文档只有26页,非常简短称得上是快速入门的文档了,TeX的基本入门这个文档还做不到,仅仅是一个简单的引子,让大家管中窥豹,先简单使用,然后才会更加深入进去. 文档早一个版本是用CJK排版的 ...

  9. 第十一章 企业项目开发--消息队列activemq

    注意:本章代码基于 第十章 企业项目开发--分布式缓存Redis(2) 代码的github地址:https://github.com/zhaojigang/ssmm0 消息队列是分布式系统中实现RPC ...

  10. PHP array与Json学习

    在 PHP 中,有三种数组类型: 索引数组 - 带有数字索引的数组,(可以理解C/C++/Java中的数组,按照索引位置直接访问) 关联数组 - 带有指定键的数组,(可以理解为map,按照键值对存储, ...