webpack html插件,webpack插件之html-webpack-plugin

html-webpack-plugin 插件专门为由webpack打包后的js提供一个载体，即一个HTML模板，里面通过script标签引用打包后的JS。

下面来看一下基本配置：

const Path = reqiure('path)

// 引入插件

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

entry: 'index.js',

output: {

path: Path.resolve(__dirname, '/dist')

filename: 'bundle.js'

},

plugins: [

// 所有的插件都是对象，需要new出来

new HtmlWebpackPlugin()

// 上面是一个0配置的html-webpack-plugin插件对象

]

}

上面只是单纯的创建了一个插件对象，并没有做其他配置，所以默认产生的HTML模板是这样的：

Webpack App

当然，毕竟该插件是提供一个承载JS的模板，如果你对它的默认模板不满意，那么你完全可以自定义一个模板，下面来看一下它常见的配置项。

Options：

1. title：配置模板的标题

2. filename：配置模板的文件名

3. template：指定模板文件的路径(这里是选择一个你自定义的html文件作为模板)

4. favicon：指定网站图标的路径

5. hash：给模板中包含的所有css和js文件设置一个唯一的hash字符串插入到文件名中

6. inject：该属性决定了脚本文件插入的位置。值可以是字符串也可以是布尔值，默认为true，字符串值可以为‘head’(插入到head标签)和‘body’(插入到body底部)

7. minify：压缩HTML，默认为true，值也可以为对象

本文只是先简单介绍了下html-webpack-plugin插件的各个常用配置，因本人水平有限，不做过多深入讲解，日后遇到问题，及时更新。

从0开始编写webpack插件

1. 前言 插件(plugins)是webpack中的一等功臣.正是由于有了诸多插件的存在,才使得webpack无所不能.在webpack源码中也是使用了大量的内部插件,插件要是用的好,可以让你的工作 ...

webpack插件之webpack-dev-server

webpack插件之webpack-dev-server webpack插件 自动化 webpack-dev-server  现在只需要使用 npm run build指令就可以自动打包,并自动处理好 ...

webpack插件之htmlWebpackPlugin

webpack插件之htmlWebpackPlugin webpack插件 自动化 htmlWebpackPlugin  由于webpack已经帮我们处理好js之间的依赖关系,现在我们可以忽略js的加 ...

探寻 webpack 插件机制

webpack 可谓是让人欣喜又让人忧,功能强大但需要一定的学习成本.在探寻 webpack 插件机制前,首先需要了解一件有意思的事情,webpack 插件机制是整个 webpack 工具的骨架,而 ...

编写webpack 插件

Webpack插件为第三方开发者释放了Webpack的最大可能性.利用多级回调开发者可以把他们自己的需要的功能引入到Webpack里面来.Build插件比Build loader 更进一步.因为你需要 ...

webpack 插件拾趣 (1) —— webpack-dev-server

结束了一季的忙碌,我这封笔已久的博客也终究该从春困的咒印中复苏,想来写些实用易读的作为开篇,自然是最好不过. 新开个 webpack 插件/工具介绍的文章系列,约莫每周更新一篇篇幅适中的文章聊以共勉, ...

webpack 插件库

webpack常用的插件安装命令 webpack常用的插件安装命令:1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML.2:np ...

【webpack插件使用】在开发中快速掌握并使用Webpack构建web应用程序

1.webpack-dev-server插件的基本使用 入门程序 const path = require('path'); // 导出一个Webpack的配置对象(通过node中的模块操作,向外暴露 ...

关于webpack插件

1.HtmlWebpackPlugin 插件 这个插件的作用是依据一个简单的index.html模板,生成一个自动引用你打包后的JS文件的新index.html.这在每次生成的js文件名称不同时非常有 ...

随机推荐

python运算符重载

python运算符重载就是在解释器使用对象内置操作前,拦截该操作,使用自己写的重载方法. 重载方法:__init__为构造函数,__sub__为减法表达式 class Number: def __in ...

Hibernate4Maven

How to create a Maven project with Hibernate libs? This blog will be a demo to describe this issue. ...

centos 基本操作(快捷键开户终端，复制，粘贴，yum命令)

centos 开启终端默认时不禁止的,所以得手动开启(可自定义键盘)菜单:System->Preferences->Keyboard Shortcuts在Desktop分类下找到“Run ...

jsp连接mysql数据库

1.新建一个Java web项目. 2.导入mysql驱动包.(这个跟上一篇写的Java连接mysql类似) 3.编写测试代码

POJ1229 域名匹配

给你两个域名,域名中包含一些通配符. * :匹配一个或任意多个部分 ?:匹配一个或三个部分 !:匹配三个以上部分. 求这两个域名是否能够表示同一个域名? 域名的长度不超过255. 分析:设给出的域名为 ...

JavaScript学习记录总结(七)——dom对象应用之用户简单管理

users.html

poj 1564 Sum It Up (DFS+ 去重+排序)

http://poj.org/problem?id=1564 该题运用DFS但是要注意去重,不能输出重复的答案 两种去重方式代码中有标出 第一种if(a[i]!=a[i-1])意思是如果这个数a[i] ...

[转] Chrome 控制台不完全指南

转自: http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html#home Chrome的开发者工具已经强大到没朋友的地步了 ...

PythonTip--一马当先--bfs

刚学python,小试牛刀 一马当先 讨论此题 | 解题报告 顶(39) (AC/Submit)Ratio(477|1829)26.08% 踩(1) 描述: 下过象棋的人都知道,马只能走'日'字形(包 ...