常用的webpack插件功能介绍：
1.HotModuleReplacementPlugin
模块热更新插件。Hot-Module-Replacement的热更新是依赖于webpack-dev-server，有时是在打包文件改变时更新打包文件或者重新加载刷新整个页面，HMR是只更新修改的部分。
HotModuleReplacementPlugin是webpack模块自带的，在plugins配置项中直接使用即可。
javascript
const webpack = require('webpack')
plugins: [ new webpack.HotModuleReplacementPlugin(), // 热更新插件]02、html-webpack-plugin
html-webpack-plugin的主要作用就是在webpack构建后生成html文件，同时把构建好入口js文件引入到生成的html文件中。
03、clean-webpack-plugin
clean-webpack-plugin用于在打包前清理上一次项目生成的bundle文件，它会根据output.path自动清理文件夹。
04 、mini-css-extract-plugin
css提取插件
**产生背景：**在进行打包时，css代码会打包到js中，不利于文件缓存
**作用：**依据每个entry生成单个css文件（将css从js中提取出来）
loader和plugins的区别：
* loader是文件加载器，能够加载资源文件，并对文件进行一些处理，如编译 ，压缩等，最终一起打包到指定的文件中。
* plugin赋予了webpack各种灵活的功能，如打包优化 ，资源管理 ，环境变量 ，注入 等，目的是为了解决loader无法实现的功能。
从上图可以看出：
* loader运行在项目打包之前；
* plugins运行在整个项目的编译时期；
在Webpack 运行的整个生命周期中会广播出许多事件，Plugin会监听这些事件，在合适的事件通过 webpack 提供的 api 改变输出结果。
对于 loader 而言，它实质上是一个转换器，将A文件编译成B文件，操作的是 文件 **，**比如将A文件编译成B文件，单纯的是一个文件转换过程。
参考：webpack（四）------webpack里面的plugin和loader的区别 - 颗就完了 - 博客园 (cnblogs.com)