前言:

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

一、基本概念

  我们为什么会需要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. Qt提示:setLayout: Attempting to set QLayout "" on MainWindow "MainWindow", which already has a layout

    如题,出现这个的原因是,如果你的窗口继承的是QMainwindow,需要设置setCentralWidget(); 如下: QWidget * widget = new QWidget ( mainW ...

  2. 【linux三剑客】grep命令

    grep, egrep, fgrep - print lines matching a pattern grep 命令用于查找文件里符合条件的字符串. grep 指令用于查找内容包含指定的范本样式的文 ...

  3. Babel 在浏览器环境使用方法

    Babel 也可以用于浏览器环境.但是,从 Babel 6.0 开始,不再直接提供浏览器版本,而是要用构建工具构建出来.如果你没有或不想使用构建工具 1.通过安装5.x版本的babel-core模块获 ...

  4. 浅谈 Objective-C Associated Objects

    简介 Associated Objects 是 Objective-C 2.0 中 Runtime 的特性之一. 在 <objc/runtime.h> 中定义的三个方法, void obj ...

  5. JAVA学习之路 (五) 类

    java类的学习 先上一个代码 package bankCard; import java.util.Scanner; // 银行卡类 public class bankCard { // 静态变量 ...

  6. 信息竞赛进阶指南--区间最值问题的ST算法

    void ST_prework() { for (int i = 1; i <= n; i++) f[i][0] = a[i]; int t = log(n) / log(2) + 1; for ...

  7. c/c++头文件的摘抄

    C/C++常用头文件 以及简单应用介绍 C/C++头文件一览 C #include <assert.h> //设定插入点 #include <ctype.h> //字符处理 # ...

  8. 学习Vue第二节,v-cloak,v-text,v-html,v-bind,v-on使用

    v-cloak,v-text,v-html,v-bind,v-on使用 <!DOCTYPE html> <html> <head> <meta charset ...

  9. Hadoop入门学习笔记-第三天(Yarn高可用集群配置及计算案例)

    什么是mapreduce 首先让我们来重温一下 hadoop 的四大组件:HDFS:分布式存储系统MapReduce:分布式计算系统YARN: hadoop 的资源调度系统Common: 以上三大组件 ...

  10. js基石之---es7的decorator修饰器

    es7的decorator修饰器 装饰器(Decorator)是一种与类(class)相关的语法,用来注释或修改类和类方法. decorator就是给类添加或修改类的变量与方法的. 装饰器是一种函数, ...