一、简介
1. 本文主要介绍的是在webpack中对于plugin的使用。
2. 首先介绍一下什么是webpack中的plugin，简单的理解就是对于webpack现有功能的扩展，比如打包优化、文件压缩功能。 与loader的区别在于loader更像是一个加载器，专门将css,less，js，vue等文件进行打包加载的。
3. plugin如何使用： 同loader一样，也是先进行npm安装，然后到webpack.config.js中进行相应的配置。
二、具体的plugin
1. 添加版权的plugin
(1)这个plugin的作用就是在打包生成的输出文件的上面加一段类似下图的注释：
(2).如何添加这个plugin: 在webpack.config.js中加上const webpack=require("webpack")；表示从node_modules中导入webpack; 然后添加上plugins相关的配置。
(3).重新npm run build即可。
2. 打包html文件的plugin: HtmlWebpackPlugin
(1). 当我们进行项目打包的时候，有一些html文件也是需要进行打包发布的，而这个HtmlWebpackPlugin就是起到这个作用的；
(2). 安装HtmlWebpackPlugin: npm install html-webpack-plugin --save-dev; 得修改一下HtmlWebpackPlugin的版本号，不然打包会报错，，改成3.0.0， 可以成功打包。
(3). 在webpack.config.js中进行相应的配置
new HtmlWebpackPlugin( { template: 'index.html'} ): 该配置的意思是以index.html作为模板来生成打包后的html文件。
const HtmlWebpackPlugin=require('html-webpack-plugin'): 是引入html-webpack-plugin。
将pubulicPath: 'dist/'注释掉。
(4) 这是新生成的html文件的位置和内容：
红色方框是相对于模板index.html多出来的代码，可以看到src是bundle.js，这是因为我们上一步将publicPath注释掉了。但是我们根据实际生成的效果，发现这注释确实是合理的。你看看上面的index.html位置不就是和bundle.js同级吗？如果我们不注释publicPath，那么它的src就是 ‘dist/bundle.js’。
3. 压缩js文件的plugin
(1). 项目真正上线的时候，需要将js文件进行压缩，压缩主要做两件事情，一个是将多余的空格去掉，一个是将变量名用简单的符号进行代替，这样可以缩小文件的体积。
(2). 安装uglifyjs-webpack-plugin: npm install [email protected] --save-dev;
(3). 在webpack.config.js中进行配置:
重新打包后发现bundle.js已经被压缩了。
三、总结
这篇文章记录了三个plugin，webpack比较难学的点就是操作非常多，要经常练习，或者做一些图文记录，否则当你忘记了以后，只能重新再看一遍教程了，很浪费时间。