Webpack插件浅析

常用的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)

相关推荐
骑自行车的码农6 分钟前
React短文系列 遍历fiber树 App的创建
前端·react.js
AskSky10 分钟前
为了搞一个完美的健身APP,我真是费尽心机
前端
斯~内克15 分钟前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
阴阳怪气乌托邦16 分钟前
别再啃OA代码了!低代码"搭积木"式搞数智化,我直接少写500行
前端·低代码
beelan21 分钟前
v-on的思考
前端
山河木马23 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户92724725021924 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平28 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
李大玄30 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵30 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom