Webpack插件浅析

常用的webpack插件功能介绍：

1.HotModuleReplacementPlugin

模块热更新插件。Hot-Module-Replacement的热更新是依赖于webpack-dev-server，有时是在打包文件改变时更新打包文件或者重新加载刷新整个页面，HMR是只更新修改的部分。

HotModuleReplacementPlugin是webpack模块自带的，在plugins配置项中直接使用即可。

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)