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. linux下TP5安装好Workerman 报错:Class 'think\worker\Server' not found

    今天把功能放到服务器,本地测试正常,上传到服务器上报错Class 'think\worker\Server' not found 首先想到的是Windows和Linux下大小写的问题,查看了代码,并没 ...

  2. 使用 MVC 5 的 EF6 Code First 入门 系列:建立一个EF数据模型

    这是微软官方SignalR 2.0教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译,这里是第一篇:建立一个E ...

  3. 修改Eclipse/MyEclipse项目的默认编码

    应该是中文操作系统的原因,eclipse默认的新项目的编码是GBK,出于对编码支持的考虑,项目组中最好统一要求是UTF-8编码进行开发. 修改eclipse的配置,可以使得eclipse的新建项目的默 ...

  4. 聊聊并发(四)——深入分析ConcurrentHashMap

    线程不安全的HashMap 因为多线程环境下,使用HashMap进行put操作会引起死循环,导致CPU利用率接近100%,所以在并发情况下不能使用HashMap,如以下代码   final HashM ...

  5. 第一章 Java常用的并发类

    注:本系列博客主要参考于<分布式Java应用:基础与实践>,林昊 著 1.常用的并发集合类 ConcurrentHashMap:线程安全的HashMap的实现 CopyOnWriteArr ...

  6. 第一章 Java常用集合类总览

    1.Java最常用的集合类 Collection接口 List接口(允许有重复元素):ArrayList.LinkedList.Vector.Stack Set接口(不允许有重复元素,可用于去重操作) ...

  7. go语言之进阶篇面向对象编程

    1.面向对象编程 对于面向对象编程的支持Go 语言设计得非常简洁而优雅.因为, Go语言并没有沿袭传统面向对象编程中的诸多概念,比如继承(不支持继承,尽管匿名字段的内存布局和行为类似继承,但它并不是继 ...

  8. iOS开发-舒尔特表

    周末闲来无事,看一个概念,挺有意思的,舒尔特表,网上也有很多人写过类似的Demo,本人闲来无事也写了一下,舒尔特表听起来很高大上的样子,不过本人的理解就是一个正方形的矩阵中放的各种小格子,可以是字母, ...

  9. SonarQube代码质量管理平台 的安装、配置与使用

    SonarQube是管理代码质量一个开放平台,可以快速的定位代码中潜在的或者明显的错误,下面将会介绍一下这个工具的安装.配置以及使用. 准备工作: 1.jdk(不再介绍) 2.sonarqube:ht ...

  10. mongo 3.0 备份和还原数据库 ,及too many positional arguments错误

    在mongo 3.0的操作 备份示例 ./mongodump -h localhost -d liongo -o ./ 错误方式: ./mongorestore -h 127.0.0.1 -d lio ...