认识

1、plugin：插件，通常是用于对某个现有的架构进行扩展

2、webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化、文件压缩等等

loader和plugin区别

1、loader：用于转换某些类型的模块，是一个转换器

2、plugin：是对webpack本身的扩展，是一个扩展器

1、在webpack.config.js中引入

2、配置

与module同级

3、此时

已知，目前我们的index.html文件是存放到项目的根目录下的，但在发布时，发布的是dist文件夹中的内容，而dist文件夹中若没有index.html文件，那么打包好的js文件也就没有意义了。

所以我们需要将index.html文件打包到dist文件夹中，则可以使用 HtmlWebpackPlugin插件

1、可以自动生成一个index.html文件（可以指定模板来生成）

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

1、安装

2、配置（在 webpack.config.js）

3、dist文件夹中有打包好的index.html了

4、解决问题

（1）因为打包好的文件中自动引入js文件，所以不需要写前面的dist前缀目录了，它们本身在同一个文件夹里面

则 -- 把之前配置的需要添加的注释掉即可

（2）想要在页面中，自动生成可以解析Vue的

（2.1）、在自己创建的index中

（2.2）、在配置文件中

（2.3）、所以打包好的index为

这里的 template ： 表示根据什么模板来生成index.html

在项目发布之前，我们需要对js等文件进行压缩处理 (进行丑化，把空格、注释等都删掉)

开发阶段，不建议丑化，等打包的时候再丑化

1、下载

2、配置

3、丑化后的js