2-21 常见的plugin以及作用的总结(webpack部分)

1. html-webpack-plugin:(打包html文件)自动生成一个index.html文件（可以指定模板）将打包的js文件，自动通过script标签插入到body中

2. webpack-dev-server: 开启一个开发服务器，帮助我监视文件变动，做到按需更新页面

3. webpack-merge: (webpack.config.js抽离合并) 在webpack.config.js里面内容太多的时候进行分割，分为prod（生产环境），dev（开发环境），base（基本），然后在webpack.json中的“bulid”“dev”脚本后面增加 "–config ./build/prod.config.js"指定对应的webpackconfig。

4. uglifyjs-webpack-plugin 压缩和混淆代码，不支持es6压缩。

5. terser-webpack-plugin 压缩和混淆代码，支持es6压缩。

6. webpack-parallel-uglify-plugin 多进程执行代码压缩，提升构建速度。

7. mini-css-extract-plugin 分离样式文件，css提取为独立文件，支持按需加载。

8. serviceworker-webpack-plugin 为网页添加离线缓存功能。

9. clean-webpack-plugin 打包前清空目录

10. speed-measure-webpack-plugin 展示loader和plugin运行的速度。

11. html-webpack-plugin 生成html文件，自动引用css和js文件。

12. extract-text-webpack-plugin 将js文件中引用的样式单例抽离成css。

13. DefinePlugin 定义全局变量，对开发和发布模式的构建允许不同的行为。

14. HotModuleReplacementPlugin 热加载

15. DllPlugin、DLLReferencePlugin 相互配合，前者第三方包的构建，值构建业务代码。

16. optimize-css-assets-webpack-plugin 优化css，去掉重复的css。

17. webpack-bundle-analyzer bundle文件分析公工具。

18. compression-webpack-plugin 生产环境可采用gzip压缩js和css。

19. happypack 通过多进程模型，来加速代码构建。

常见的plugin : https://segmentfault.com/a/1190000018695134