html-webpack-plugin插件的详细介绍和使用
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool:'eval-source-map',
devServer:{
inline:true,
colors:true,
port:8080,
contentBase:__dirname + '/public'
},
entry:{
index:__dirname + '/app/index.js',
main:__dirname + '/app/main.js'
},
output:{
path:__dirname + '/public', //通过HtmlWebpackPlugin插件生成的html文件存放在这个目录下面
filename:'/js/[name].js' //编译生成的js文件存放到根目录下面的js目录下面,如果js目录不存在则自动创建
},
plugins:[
new HtmlWebpackPlugin({
title:'自动生成自定义标题',//如果使用了模板,就使用模板里的title,这里的title设置会失效,哪怕模板里的title为空
template:__dirname + '/public/tempIndex.html',//需要编译的模板,可以是jade等第三方模板引擎也可以说纯html页面
filename:'demo.html',//最终生成的文件名,默认是index.html
hash:true,//是否给所有包含的js、css文件后面添加hash值,可以用来清除缓存,但好像不是很管用
inject:true,// | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中,如果设置为 true 或者 body,所有的 javascript 资源将被放置到 body 元素的底部,'head' 将放置到 head 元素中。
chunks:['index'] //指定生成的文件demo.hmtl需要包括entry里的哪些入口文件(这里是index,main.js不会引入),不设置的话所以入口js文件都会被引入进来
}),
new webpack.HotModuleReplacementPlugin() //热加载
]
}
Note:HtmlWebpackPlugin插件配置里的hash属性虽然可以给html引入的所以css文件后面加hash字符串,可以达到清除缓存的效果,但缺点是有些不需要清除缓存的css文件它也清除了,因为每次编译它会给所有css文件加同样的hash字符串。即时其他css没有变化。所以推荐用extract-text-webpack-plugin插件在编译提取css属性的时候用contenthash配置一下就可以解决这个问题。更详细的介绍点击这篇文章
html-webpack-plugin插件的详细介绍和使用的更多相关文章
- vscode Settings Sync 插件的详细介绍
参考链接:https://www.jianshu.com/p/dbbdc635f8e1
- 简单webpack plugin 开发
重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...
- IDEA中的lombok插件安装以及各注解的详细介绍
IDEA中的lombok插件安装以及各注解的详细介绍 其实对于我们来说, 写好实体类后,直接用快捷方式生成get,set方法,还有 构造方法就行了,但是对于字段比较多的, 如果修改一个属性的话,就要再 ...
- webpack(9)plugin插件功能的使用
plugin 插件是 webpack 的支柱功能.webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上! 插件目的在于解决 loader 无法实现的其他事. 常用的插件 ...
- vue中eslintrc.js配置最详细介绍
本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /* ...
- 如何开发webpack plugin
继上回介绍了如何开发webpack loader 之后.趁热打铁,来继续看下webpack另一个核心组成:plugin. 下面也和loader一样,让我们一起从基本的官方文档着手看起. loader和 ...
- QT中PRO文件写法的详细介绍
学习Qt时,发现有些知识看了不经常用就忘了,以下是书本上写的一些关于qmake的相关知识,自己看后,打算把一些经常用到的记下来,整理整理. Qt程序一般使用Qt提供的qmake工具来编译. qmake ...
- vue对比其他框架详细介绍
vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处 ...
- 如何编写一个WebPack的插件原理及实践
_ 阅读目录 一:webpack插件的基本原理 二:理解 Compiler对象 和 Compilation 对象 三:插件中常用的API 四:编写插件实战 回到顶部 一:webpack插件的基本原理 ...
随机推荐
- [Android]对BaseAdapter中ViewHolder编写简化
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3642849.html 在Android项目中,经常都会用到Li ...
- Android判断屏幕开关状态
方法一:使用系统服务 PowerManager pm= (PowerManager) mContext.getSystemService(Context.POWER_SERVICE); if(!pm. ...
- Android JNI简介
JNI简介 JNI (Java Native Interface),Java的本地接口 JNI是Java众多开发技术中的一门,意在利用本地代码,为Java程序提供 更高效,更灵活的拓展.应用场景包括: ...
- AutoLayout自动布局
原文转自http://www.cnblogs.com/xjf125/p/4895978.html 目录: 一.什么是AutoLayout? 二.创建autoLayout的方法 三.VFL语言 ...
- 最新GHOST XP系统安全稳定版 V2016年
来自系统妈:http://www.xitongma.com 电脑公司GHOST xp系统经典优化版 V2016年4月 系统概述 电脑公司ghost xp系统经典优化版集成最常用的装机软件,集成最全面的 ...
- 谈谈vertical-align的text-bottom和text-top - 韦奕
学习资料 : http://www.tuicool.com/articles/uuYvMv 友情链接 行高 替换元素,非替换元素,内联元素,块元素
- 【转】简析 .NET Core 构成体系
前文介绍了.NET Core 在整个.NET 平台所处的地位,以及与.NET Framework的关系(原文链接),本文将详细介绍.NET Core 框架的构成和各模块主要功能,以及如何实现跨平台. ...
- #研发解决方案介绍#Recsys-Evaluate(推荐评测)
郑昀 基于刘金鑫文档 最后更新于2014/12/1 关键词:recsys.推荐评测.Evaluation of Recommender System.piwik.flume.kafka.storm.r ...
- IO流04--毕向东JAVA基础教程视频学习笔记
Day20 01 File概述02 File对象功能-创建和删除03 File对象功能-判断04 File对象功能-获取05 File对象功能-文件列表106 File对象功能-文件列表207 列出目 ...
- ORACLE SQL调优案例一则
收到监控告警日志文件(Alert)的作业发出的告警邮件,表空间TEMPSCM2不能扩展临时段,说明临时表空间已经被用完了,TEMPSCM2表空间不够用了 Dear All: The Instanc ...