前言:

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

一、基本概念

  我们为什么会需要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入口,并区分它的模式,进行正确的打包即可。

最新文章

  1. spring源码分析之@ImportSelector、@Import、ImportResource工作原理分析
  2. CHARFORMAT2 structure
  3. jQuery als.js 跑马灯
  4. bootstrap清除拟态框内添加新HTML再打开时会有缓存现象
  5. Python基本概念及零碎知识点
  6. android中GridView关于间距的属性值介绍
  7. TreeSet()详解
  8. Ubuntu eclipse :An error has occurred. See the log file
  9. js:不是空字符串的空字符串引起的bug
  10. SpringBoot使用ELK日志收集
  11. Beanstalkd,zeromq,rabbitmq的区别
  12. 学习笔记: MD5/DES/RSA三类加密,SSL协议解析
  13. time 与 datetime 模块的常用方法
  14. Git之创建仓库并上传/更新项目版本
  15. Django---渲染到模板
  16. [Python] 拉格朗日插值
  17. BootStap学习笔记(2)
  18. Hadoop生态圈-Hive的自定义函数之UDAF(User-Defined Aggregation Function)
  19. WebStorm 使用webpack打包(build) Vue 静态资源无法访问(路径不对)问题
  20. windows下开启 PHP扩展Redis

热门文章

  1. linux uniq 命令实用手册
  2. Java语言和C++语言的差异
  3. 安装opencv3.3.0方法
  4. 配置windows自动修改密码和自动登录
  5. 用Swoole4 打造高并发的PHP协程Mysql连接池
  6. php beast windows编译教程
  7. 图论--2-SAT--详解
  8. Vue实现靠边悬浮球(PC端)
  9. Spring Cloud 学习 之 Spring Cloud Eureka(源码分析)
  10. Qt数据库总结