官方文档：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. quotacheck - 扫描文件系统,创建,检测并修补配额文件

    总览(SYNOPSIS) quotacheck [ -agucfinvdFR ] filesystem 描述(DESCRIPTION) quotacheck 察看每一个文件系统,建立当前磁盘使用情况表 ...

  2. 295-Xilinx Kintex-7 X7K325T的半高PCIe x4双路万兆光纤收发卡

    Xilinx Kintex-7 X7K325T的半高PCIe x4双路万兆光纤收发卡 一.板卡概述       本板卡系我公司自主研发,采用Xilinx公司的XC7K325T-2FFG676I芯片作为 ...

  3. Go's Declaration Syntax

    Introduction Newcomers to Go wonder why the declaration syntax is different from the tradition estab ...

  4. Spring 事物机制(总结)

    Spring两种事物处理机制,一是声明式事物,二是编程式事物 声明式事物 1)Spring的声明式事务管理在底层是建立在AOP的基础之上的.其本质是对方法前后进行拦截,然后在目标方法开始之前创建或者加 ...

  5. ForkJoin简单示例

    import java.util.concurrent.ExecutionException; import java.util.concurrent.ForkJoinPool; import jav ...

  6. MySQL查看表索引

    mysql> show index from tblname; mysql> show keys from tblname; · Table 表的名称. · Non_unique 如果索引 ...

  7. Python 递归算法指归

    1. 递归概述 递归( recursion)是一种编程技巧,某些情况下,甚至是无可替代的技巧.递归可以大幅简化代码,看起来非常简洁,但递归设计却非常抽象,不容易掌握.通常,我们都是自上而下的思考问题, ...

  8. springmvc的请求参数

    @RequestMapping("/testRequestParam") public String testRequestParam(@RequestParam("us ...

  9. JS中数据结构之散列表

    散列是一种常用的数据存储技术,散列后的数据可以快速地插入或取用.散列使用的数据 结构叫做散列表.在散列表上插入.删除和取用数据都非常快. 下面的散列表是基于数组进行设计的,数组的长度是预先设定的,如有 ...

  10. JS谷歌浏览器断点调试

    1.找到对应的文件 按F12打开网页调试工具,默认打开的是Elements,显示的是网页标签元素.选择Source,在左侧找到对应的js代码文件(这里是在page标签上找到的) 1.1.如何找到web ...