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版本中默认使用的是 ...
随机推荐
- Node.js学习笔记(1) - Node.js简介
近期在看一些Node.js的知识,看完后觉得,一些前面的东西忘记了,于是整理一下,方便自己查阅,也希望对学习Node.js的朋友有些帮助: 当然以下只是我个人的观点和理解,不喜勿喷,也望大神指教. 一 ...
- 简易配置Django的Static文件
http://blog.csdn.net/hireboy/article/details/8806098 Django 1.3以后,采用static方式处理静态文件,比如网站的css js image ...
- python类型比较的3种方式(转)
通过types模块的类成员来判断,其实所有python中的类型都是这个types模块中类型的实例. import types type(x) is types.IntType # 判断是否int 类型 ...
- docker 图解学习
http://www.cnblogs.com/bethal/tag/docker/
- Inside Portable Class Libraries
Portable Class Libraries were introduced with Visual Studio 2010 SP1 to aid writing libraries that c ...
- INDY10 IDHTTPSERVER返回中文不乱码
INDY10 IDHTTPSERVER返回中文不乱码 procedure TynHttpServer.CommandGet(AContext: TIdContext; ARequestInfo: TI ...
- JVM内存模型及垃圾回收算法
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 学习Android Studio里的Gradle
一直听说Gradle很强大,只是偶尔用Android Studio创建Demo的时候看到他一次,今天抽个时间完整记录一下. 1.gradle位置 Android Studio项目创建好之后,默认有3个 ...
- 15个具有高度影响力的Apache开源项目
自1999年创立以来,Apache软件基金会如今已成了众多重要的开源软件项目之家.其中成功的项目有Geronimo,有Tomcat,有Hadoop,有如今成了大数据王国关键车毂的分布式计算系统. 虽然 ...
- 在Xcode中显示代码行号
打开一个程序,点击屏幕菜单栏的Xcode,然后选Xcode -> Preferences -> Text Editing -> Show line numbers前面打勾就行了. 如 ...