前言:

  本文将分为基本概念、基础使用、模块的运用(问题解决)来进行阐述。

一、基本概念

  我们为什么会需要HtmlWebpackPlugin插件?

  在真实发布项目时,发布的是dist文件夹中的内容,但是dist文件夹中如果没有index.html文件,那么打包的js等文件也就没有意义了。所以,我们需要将index.html文件打包到dist文件夹中,这个时候就需要使用HtmlWebpackPlugin插件。

  那么,HtmlWebpackPlugin插件到低可以为我们做什么呢?

  一、自动生成一个index.html文件(可以指定模板来生成)

  二、将打包的js文件,自动通过script标签插入到body中

二、基础使用

  1、安装插件  npm install html-webpack-plugin --save-dev (因为只在生产环境下用到,所以加上-dev)

  2、使用插件,修改webpack.config.js文件中plugins部分的内容如下:

module.exports = {
plugins: [
new htmlWebpackPlugin({
title: "this is title", //用于生成的HTML文档的标题
filename: "index.html", //生成的模板文件的名字,默认index.html
template: "index.html", //模板来源文件
inject: true | 'head' | 'body' | false ,注入所有的资源到特定的 template 或者 templateContent 中,如果设置为 true 或者 body,所有的 javascript 资源将被放置到 body 元素的底部,'head' 将放置到 head 元素中
favicon: "", //指定页面图标
minify: {} | false, //传递html-minifier选项给minify输出
  /*
{
caseSensitive: false, ////是否大小写敏感
collapseBooleanAttributes: true, //是否简写boolean格式的属性如:disabled="disabled" 简写为disabled
collapseWhitespace: true //是否去除空格
},
*/
hash: true, //是否生成hash添加在引入文件地址的末尾,类似于常用的时间戳,这个可以避免缓存带来的麻烦。如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件,对于解除 cache 很有用
cache: true, //是否需要缓存,如果填写true,则文件只有在改变时才会重新生成
showErrors: true, //是否将错误信息写在页面里,默认true,出现错误信息则会包裹在一个pre标签内添加到页面上
chunks: ['a', 'b'], //引入的a,b模块,这里指定的是entry中设置多个js时,在这里指定引入的js,如果不设置则默认以数组形式全部引入
chunksSortMode: "auto", //引入模块的排序方式
excludeChunks: ['a', 'b'], //排除的模块,引入的除a,b模块以外的模块,与chunks相反;
xhtml: false //生成的模板文档中标签是否自动关闭,针对xhtml的语法,会要求标签都关闭,默认false
})
]
};

三、模块的运用

  情景描述:当三个本地服务想同时正常开启,但统一出现了一个不完整的页面。

  解决方案:添加chunks属性,主要实现模块载入,即entry的设置。

  原因:

      production 都是单 entry 打包,develop 却存在多 entry 打包;

      所以三个本地服务同时开启直接关系到打包的问题,那么,我们设置好chunks入口,并区分它的模式,进行正确的打包即可。

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

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

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

  2. webpack插件解析:HtmlWebpackPlugin是干什么的以及如何使用它

    HtmlWebpackPlugin是一个出现频率比较高的webpack插件,本文对其作用和配置作一番比较详细的分析(本文的配置均在webpack.config.js中进行). 为何使用它 简单来说,H ...

  3. 从0开始编写webpack插件

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

  4. 探寻 webpack 插件机制

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

  5. 编写webpack 插件

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

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

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

  7. 【Web】阿里icon图标webpack插件(webpack-qc-iconfont-plugin)详解

    webpack-qc-iconfont-plugin webpack-qc-iconfont-plugin是一个webpack插件,可以轻松地帮你将阿里icon的图标项目下载至本地 开发初衷 之前已经 ...

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

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

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

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

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

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

随机推荐

  1. java并发中的Synchronized关键词

    文章目录 为什么要同步 Synchronized关键词 Synchronized Instance Methods Synchronized Static Methods Synchronized B ...

  2. JNI与NDK简析(一)

    1 JNI 简介 在Android Framework中,需要提供一种媒介或 桥梁,将Java层(上层)与C/C++层(下层)有机的联系起来,使得他们互相协调完成某些任务.而充当这种媒介的就是Java ...

  3. Get史上最优雅的加密方式!没有之一!

    你的配置文件是不是还在使用下面这种落后的配置暴露一些密码: jdbc.url=jdbc:mysql://127.0.0.1:3305/afei jdbc.username=afei 如果是,那么继续往 ...

  4. $_server[]关于浏览器和服务器的参数获取

    $_SERVER['USER'] www $_SERVER['HOME'] /home/www $_SERVER['HTTP_UPGRADE_INSECURE_REQUESTS'] 1 $_SERVE ...

  5. 关于LinearLayout设置权重后width或height不设置0dp的影响说明

    摘要 平时没那么注意LinearLayout布局时权重的问题,设置了权重属性后,通常建议将width或height的属性值设置为0dp,有时候设置权重后,还是习惯将width或height的属性设置为 ...

  6. Extmail邮件过滤和杀毒

    前面整合好了extmail,不过没有测试使用foxmail这种客户端去测试收发邮件功能,今天测试的时候发现了蛮多问题,大部分和/etc/authmysqlrc这个文件的配置和权限相关,都是小问题,折腾 ...

  7. Redis 6.0 正式版终于发布了!除了多线程还有什么新功能?

    Redis 6.0.1 于 2020 年 5 月 2 日正式发布了,如 Redis 作者 antirez 所说,这是迄今为止最"企业"化的版本,也是有史以来改动最大的一个 Redi ...

  8. 图论--差分约束--POJ 1201 Intervals

    Intervals Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 30971 Accepted: 11990 Descripti ...

  9. 题目分享Q

    题意:给出一个N个点的树,找出一个点来,以这个点为根的树时,所有点的深度之和最大 分析:这可以说是换根法的裸题吧 首先考虑对一个给定的根如何计算,这应该是最简单的那种树形dp吧甚至可能都不算dp(好像 ...

  10. socket编程之时间回射服务器

    使用到的函数: // 返回值:读到的字节数,若已到文件尾,返回0:若出错,返回-1 ssize_t read(int fd, void *buf, size_t nbytes); // 返回值:若成功 ...