Webpack入门教程二十七

126.使用同一模板文件生成不同文件且标题不同,修改webpack.config.js文件,代码如下

var htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
	entry:{
		main:‘./src/script/main.js‘,
		a:‘./src/script/a.js‘
	},
	output:{
		path:‘./dist‘,
		filename:‘js/[name]-[hash].js‘,
	},
	plugins:[
		new htmlWebpackPlugin({
			template:‘index.html‘,
			filename:‘a.html‘,
			inject:false,
			title:‘this is a.html‘
		}),
		new htmlWebpackPlugin({
			template:‘index.html‘,
			filename:‘b.html‘,
			inject:false,
			title:‘this is b.html‘
		}),
		new htmlWebpackPlugin({
			template:‘index.html‘,
			filename:‘c.html‘,
			inject:false,
			title:‘this is c.html‘
		})
	]
}

127.修改模板文件index.html,代码如下

128.使用cnpm run webpack命令重新打包

129.查看生成的a.html,b.html,c.html文件

时间: 2024-10-21 14:35:27

Webpack入门教程二十七的相关文章

Webpack入门教程二十

102.webpack.config.js文件中entry的三种使用方式一对象形式,修改webpack.config.js文件,内容如下 module.exports = { entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, output:{ path:'./dist/js', filename:'[name].js' } } 103.使用cnpm run webpack命令重新打包 104.查看dist/js目录生成的文

Webpack入门教程二十三

113.使用for循环输出HtmlWebpackPlugin中的内容,修改模板文件index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>webpack demo</title&

Webpack入门教程二十四

116.输出HtmlWebpackPlugin.files中的内容,修改模板文件index.html,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>webpack demo</ti

Webpack入门教程二十五

119.输出HtmlWebpackPlugin.options中的内容,修改模板文件index.html,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>webpack demo</

Webpack入门教程二十九

133.在模板中以内联的形式引用script脚本,修改webpack.config.js文件,代码如下 var htmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, output:{ path:'./dist', filename:'js/[name]-[hash].js',

【OpenCV入门教程之十七】OpenCV重映射 &amp; SURF特征点检测合辑

本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/30974513 作者:毛星云(浅墨)    微博:http://weibo.com/u/1723155442 知乎:http://www.zhihu.com/people/mao-xing-yun 邮箱: [email protected] 写作当前博文时配套使用的OpenCV版本: 2.4.9 本篇文章中,我们一起探讨了OpenCV中

C语言快速入门教程(二)

C语言快速入门教程(二) C语言的基本语法 本节学习路线图: 引言: C语言,顾名思义就是一门语言,可以类比一下英语; 你要说出一个英语的句子需要:  单词  +  语法!  将单词按照一定的语法拼凑起来就成了一个英语句子了; C语言同样是这样,只不过单词可以理解为一些固定的知识点,而语法可以理解为算法(可以理解为解决问题的方法) 在这一节中我们就对固定知识点中的语言描述与数据存储进行解析! 1.C语言的基本元素 1.1  标识符 什么是标识符? 答:在C语言中,符号常量,变量,数组,函数等都需

DataVeryLite入门教程(二) Entity篇

DataVeryLite 是基于.net 4.0的数据库持久化ORM框架. 目前支持的数据库有Sqlserver,Mysql,Oracle,Db2,PostgreSql,Sqlite和Access. 最好先阅读DataVeryLite入门教程(一) 配置篇,然后再阅读本篇.如果你觉得麻烦也可以跳过. Entity是ORM中的核心对象之一,一个继承Entity的对象对应于数据库中的一个表. Entity提供丰富的API对表中的单条数据进行操作. 比如根据id或其他条件,加载,删除,插入,更新和部分

Spring Cloud 入门教程(二): 配置管理

使用Config Server,您可以在所有环境中管理应用程序的外部属性.客户端和服务器上的概念映射与Spring Environment和PropertySource抽象相同,因此它们与Spring应用程序非常契合,但可以与任何以任何语言运行的应用程序一起使用.随着应用程序通过从开发人员到测试和生产的部署流程,您可以管理这些环境之间的配置,并确定应用程序具有迁移时需要运行的一切.服务器存储后端的默认实现使用git,因此它轻松支持标签版本的配置环境,以及可以访问用于管理内容的各种工具.很容易添加