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插件的详细介绍和使用的更多相关文章

  1. vscode Settings Sync 插件的详细介绍

    参考链接:https://www.jianshu.com/p/dbbdc635f8e1

  2. 简单webpack plugin 开发

    重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...

  3. IDEA中的lombok插件安装以及各注解的详细介绍

    IDEA中的lombok插件安装以及各注解的详细介绍 其实对于我们来说, 写好实体类后,直接用快捷方式生成get,set方法,还有 构造方法就行了,但是对于字段比较多的, 如果修改一个属性的话,就要再 ...

  4. webpack(9)plugin插件功能的使用

    plugin 插件是 webpack 的支柱功能.webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上! 插件目的在于解决 loader 无法实现的其他事. 常用的插件 ...

  5. vue中eslintrc.js配置最详细介绍

    本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /* ...

  6. 如何开发webpack plugin

    继上回介绍了如何开发webpack loader 之后.趁热打铁,来继续看下webpack另一个核心组成:plugin. 下面也和loader一样,让我们一起从基本的官方文档着手看起. loader和 ...

  7. QT中PRO文件写法的详细介绍

    学习Qt时,发现有些知识看了不经常用就忘了,以下是书本上写的一些关于qmake的相关知识,自己看后,打算把一些经常用到的记下来,整理整理. Qt程序一般使用Qt提供的qmake工具来编译. qmake ...

  8. vue对比其他框架详细介绍

    vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处 ...

  9. 如何编写一个WebPack的插件原理及实践

    _ 阅读目录 一:webpack插件的基本原理 二:理解 Compiler对象 和 Compilation 对象 三:插件中常用的API 四:编写插件实战 回到顶部 一:webpack插件的基本原理 ...

随机推荐

  1. [Android]对BaseAdapter中ViewHolder编写简化

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3642849.html 在Android项目中,经常都会用到Li ...

  2. Android判断屏幕开关状态

    方法一:使用系统服务 PowerManager pm= (PowerManager) mContext.getSystemService(Context.POWER_SERVICE); if(!pm. ...

  3. Android JNI简介

    JNI简介 JNI (Java Native Interface),Java的本地接口 JNI是Java众多开发技术中的一门,意在利用本地代码,为Java程序提供 更高效,更灵活的拓展.应用场景包括: ...

  4. AutoLayout自动布局

      原文转自http://www.cnblogs.com/xjf125/p/4895978.html 目录: 一.什么是AutoLayout? 二.创建autoLayout的方法 三.VFL语言   ...

  5. 最新GHOST XP系统安全稳定版 V2016年

    来自系统妈:http://www.xitongma.com 电脑公司GHOST xp系统经典优化版 V2016年4月 系统概述 电脑公司ghost xp系统经典优化版集成最常用的装机软件,集成最全面的 ...

  6. 谈谈vertical-align的text-bottom和text-top - 韦奕

    学习资料 : http://www.tuicool.com/articles/uuYvMv 友情链接  行高   替换元素,非替换元素,内联元素,块元素

  7. 【转】简析 .NET Core 构成体系

    前文介绍了.NET Core 在整个.NET 平台所处的地位,以及与.NET Framework的关系(原文链接),本文将详细介绍.NET Core 框架的构成和各模块主要功能,以及如何实现跨平台. ...

  8. #研发解决方案介绍#Recsys-Evaluate(推荐评测)

    郑昀 基于刘金鑫文档 最后更新于2014/12/1 关键词:recsys.推荐评测.Evaluation of Recommender System.piwik.flume.kafka.storm.r ...

  9. IO流04--毕向东JAVA基础教程视频学习笔记

    Day20 01 File概述02 File对象功能-创建和删除03 File对象功能-判断04 File对象功能-获取05 File对象功能-文件列表106 File对象功能-文件列表207 列出目 ...

  10. ORACLE SQL调优案例一则

    收到监控告警日志文件(Alert)的作业发出的告警邮件,表空间TEMPSCM2不能扩展临时段,说明临时表空间已经被用完了,TEMPSCM2表空间不够用了 Dear All:   The Instanc ...