html-webpack-plugin插件的详细介绍和使用

 1 var webpack = require(‘webpack‘);
 2 var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
 3 module.exports = {
 4     devtool:‘eval-source-map‘,
 5     devServer:{
 6         inline:true,
 7         colors:true,
 8         port:8080,
 9         contentBase:__dirname + ‘/public‘
10     },
11     entry:{
12         index:__dirname + ‘/app/index.js‘,
13         main:__dirname + ‘/app/main.js‘
14     },
15     output:{
16         path:__dirname + ‘/public‘, //通过HtmlWebpackPlugin插件生成的html文件存放在这个目录下面
17         filename:‘/js/[name].js‘ //编译生成的js文件存放到根目录下面的js目录下面,如果js目录不存在则自动创建
18     },
19     plugins:[
20         new HtmlWebpackPlugin({
21             title:‘自动生成自定义标题‘,//这个配置不生效,好奇怪
22             template:__dirname + ‘/public/tempIndex.html‘,//需要编译的模板,可以是jade等第三方模板引擎也可以说纯html页面
23             filename:‘demo.html‘,//最终生成的文件名,默认是index.html
24             hash:true,//是否给所有包含的js、css文件后面添加hash值,可以用来清除缓存,但好像不是很管用
25             inject:true,// | ‘head‘ | ‘body‘ | false  ,注入所有的资源到特定的 template 或者 templateContent 中,如果设置为 true 或者 body,所有的 javascript 资源将被放置到 body 元素的底部,‘head‘ 将放置到 head 元素中。
26             chunks:[‘index‘] //指定生成的文件demo.hmtl需要包括entry里的哪些入口文件(这里是index,main.js不会引入),不设置的话所以入口js文件都会被引入进来
27         }),
28         new webpack.HotModuleReplacementPlugin() //热加载
29     ]
30 }

更详细的介绍点击这篇文章

时间: 2024-10-12 12:37:24

html-webpack-plugin插件的详细介绍和使用的相关文章

PHP模板引擎smarty详细介绍

篇文章主要介绍了PHP模板引擎smarty详细介绍,本文讲解了什么是smarty.smarty优点.不适合使用smarty的地方.smarty目录结构及版本,需要的朋友可以参考下 /* 一.什么是smarty? smarty是一个使用PHP写出来的模板PHP模板引擎,它提供了逻辑与外在内容的分离,简单的讲, 目的就是要使用PHP程序员同美工分离,使用的程序员改变程序的逻辑内容不会影响到美工的页面设计,美工重新修改页面不会影响到程序的程序逻辑,这在多人合作的项目中显的尤为重要. 二.smarty优

struts详细介绍

Struts2 1. 目录 1.目录 2.MVC 3.STRUTS2解析 4.标签 5.OGNL 6.国际化 7.类型转换 8.校验 9. 拦截器 10.上传与下载 11.STRUTS2与对JSON的支持 2. MVC 把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller).MVC模式最早由Trygve Reenskaug在1978年提出,在20世纪80年代为程序语言Smalltalk发明的一种软件设计模式.MVC模式的目的是实现一种动态的程式设计,使后

eclipse maven plugin 插件 安装 和 配置(2)

eclipse maven plugin 插件 安装 和 配置(2) 就像上篇文章所说,折腾一会终于安装完成,终于松了一口气,不料再次打开eclipse时又有错误信息,在网上找了找,找了篇比较详细的,原文地址: http://www.sunchis.com/html/hsware/software/2011/1102/371.html 在Eclipse中安装了m2eclipse(maven插件),安装完成后重启Eclipse,出现下列警告:Please make sure the -vm opt

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

_ 阅读目录 一:webpack插件的基本原理 二:理解 Compiler对象 和 Compilation 对象 三:插件中常用的API 四:编写插件实战 回到顶部 一:webpack插件的基本原理 webpack构建工具大家应该不陌生了,那么下面我们来简单的了解下什么是webpack的插件.比如我现在写了一个插件叫 "kongzhi-plugin" 这个插件.那么这个插件在处理webpack编译过程中会处理一些特定的任务. 比如我们现在在webpack.config.js 中引入了一

深入理解maven构建生命周期和各种plugin插件

深入理解maven构建生命周期和各种plugin插件 本博文不会长篇大论的讨论生命周期的概念,而是从各种plugin的实际功能和应用出发,来讨论maven的实际应用,说得通透一点,生命周期(lifecycle)可以理解成由各种plugin按照一定的顺序执行来完成java项目清理.编译.打包.测试.布署等整个项目的流程的一个过程. 生命周期(lifecycle)由各个阶段组成,每个阶段由maven的插件plugin来执行完成.生命周期(lifecycle)主要包括clean.resources.c

ini_set('memory_limit', '128M')、php.ini memory_limit引起的问题详细介绍

故障现象 在运行PHP程序,通常会遇到"Fatal Error: Allowed memory size of xxxxxx bytes exhausted"的错误, 这个意味着PHP脚本使用了过多的内存,并超出了系统对其设置的允许最大内存. 解决这个问题,首先需要查看你的程序是否分配了过多的内存,在程序没有问题的情况下,你可以通过一下方法来增加PHP的内存限制(memory_limit). 检查php的内存限制值 为了查看这个值,你需要建立一个空的php文件,比如view-php-i

eclipse maven plugin 插件 安装 和 配置

环境准备: eclipse(Helios) 3.6 maven 3.0.4 maven3 安装: 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Maven是 Apache 下的一个项目,目前最新版本是 3.0.4,我用的也是这个. 首先去官网下载 Maven:http://www.apache.org/dyn/closer.cgi/maven/binaries/apache-maven-3.0.4-bin.tar.gz 下载完成之后将其解压,我将解压后的文件夹重命名成 mave

Eclipse安装SVN插件方式简明介绍

一.Links安装: 推荐使用此种安装方式,因为它便于插件的管理. 在eclipse根目录下新建文件夹links,这样就得到了eclipse\links 在eclipse\links下新建一个link文件(需要为每个插件建一个.link文件),比如svn.link,在这里我的插件安装目录结构为F:\eclipsePlugins\svn\,所以link文件名我命名为svn.link 在svn.link中写入如下一句话path=F:/EclipsePlugins/svn,或者path=F:\\Ecl

银光甘特图/日历图/排程控件GTP.NET for Silverlight详细介绍

GTP.NET for Silverlight是Silverlight下的控件包,提供了交互式的甘特图以及日程安排图,达到时间上可视化和交互,控件完全分发免费.方案网作为PlexityHide在中国的核心代理商,为客户提供优质的客服和技术支持.                          具体功能: 提供了丰富的用户界面直接运行于Silverlight插件下 使用Silverlight开发,达到了跨平台的目的,包括Apple Machintosh和 Microsoft Windows 提供