官方文档：https://www.npmjs.com/package/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模板是这样的：

 <!-- HTML5  -->

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="UTF-8">

     <title>Webpack App</title>

   </head>

   <body>

     <script src="bundle.js"></script>

   </body>

 </html>

当然，毕竟该插件是提供一个承载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插件的各个常用配置，因本人水平有限，不做过多深入讲解，日后遇到问题，及时更新。

webpack插件之html-webpack-plugin的更多相关文章

  1. 写webpack插件报警告Tapable.plugin is deprecated. Use new API on .hooks instead解决方案，webpack4插件新写法

    最近写了个小插件报了个警告,然后去百度了一下,全都给我说extract-text-webpack-plugin这个插件有问题要更新,我也是无语了,这个插件我用都没用,百度翻了下齐刷刷全是这个答案,搞得 ...

  2. 从0开始编写webpack插件

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

  3. webpack插件之webpack-dev-server

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

  4. webpack插件之htmlWebpackPlugin

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

  5. 探寻 webpack 插件机制

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

  6. 编写webpack 插件

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

  7. 80行代码教你写一个Webpack插件并发布到npm

    1. 前言 最近在学习 Webpack 相关的原理,以前只知道 Webpack 的配置方法,但并不知道其内部流程,经过一轮的学习,感觉获益良多,为了巩固学习的内容,我决定尝试自己动手写一个插件. 这个 ...

  8. 【前端必会】不知道webpack插件? webpack插件源码分析BannerPlugin

    背景 不知道webpack插件是怎么回事,除了官方的文档外,还有一个很直观的方式,就是看源码. 看源码是一个挖宝的行动,也是一次冒险,我们可以找一些代码量不是很大的源码 比如webpack插件,我们就 ...

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

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

  10. webpack 插件库

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

随机推荐

  1. new和malloc申请内存失败后的处理

    1.c++ 标准 new 失败是抛出异常的,Visual C++ 6.0中返回一个NULL指针. 使用new(std::nothrow)可以保证失败时返回NULL; 因此完全可以 #define ne ...

  2. JAVA 利用 jmc或jvisualvm 监控 本地或者远程JVM

    本地检测之间到$JAVA_HOME/bin 下的目录点击jmc 或者jvisualvm,然后选择你要监控的app 可是一般我们生产环境项目都是部署在远程,这个时候想要监控怎么办 1.监控tomcat ...

  3. MYSQL5.7.9改密码相关设置

    Centos7上,对MySQL5.7开启远程连接. 1.修改/etc/my.cnf [mysqld] validate_password=off 2.命令行进入mysql use mysql; GRA ...

  4. 如何在某个apps包下面中创建APP

  5. FMXUI ANDROID下连续按多次返回出现异常

    在ANDROID下,按返回键后,默认是关闭当前Frame,但连接按返回键,会对当前Frame执行多次关闭动作,​​因为已经释放过对象,再次关闭会出现异常错误,​解决办法:定义一个标识如FClosed: ...

  6. oracle中日期转换

    oracle中,日期转换函数有很多,常用命令如下: to_char()命令将时间戳转换为用户规定的日期格式,如: SELECT TO_CHAR(sysdate,'YYYY-MM-DD hh24:mi: ...

  7. sql 2008常用语法语句收集

    EXEC sp_dropuser 'test' : 从当前数据库删除用户 test EXEC sp_droplogin 'test' : 从 SQL Server 中删除登录 test select ...

  8. outlook使用inline style回复邮件

    Reply with inline comments within the original message text When you reply to email messages in Outl ...

  9. Ubuntu紫色背景颜色代码

    前言 我一直很中意Ubuntu的紫,记录一下颜色代码以免忘了! so Ubuntu紫色背景颜色代码background=300924 red = 48 green 9 blue  36

  10. JS：收集的一些Array及String原型对象的扩展实现代码

    扩展Array的原型对象的方法  // 删除数组中数据 Array.prototype.del = function(n) { if (n<0) return this; return this ...