plugin的原理
2022/7/21 6:24:39
本文主要是介绍plugin的原理,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
plugin插件的原理
扩展webpack, 加入自定义的构建行为
webpack内部的钩子 hooks
- tap: 可以注册同步钩子和异步钩子
- tapAsync: 回调方式注册异步钩子
- tapPromise: promise方式注册异步钩子
Compiler构建对象, 保存着完整的webpack环境配置
- compiler.options: 可以访问所有配置文件, 如entry, output, plugin,loader等
- compiler.inputFileSystem和compiler.outputFileSystem可以进行文件操作, 相当于nodejs中的fs
- compiler.hooks 可以注册不同种类的hook
Compilation对象代表一次资源的构建, 可以访问所有模块和它们的依赖
- compilation.modules: 所有的模块
- compilation.chunks: 多个modules组成的代码块
- compilation.assets: 本次打包生成的文件结果
- compilation.hooks: 注册不同类型的hook
创建一个plugin
/** * 1. webpack加载webpack.config.js的所有配置, 此时会new 插件, 执行插件的constructor方法 * 2. webpack创建compiler对象 * 3. 遍历所有plugins里面的插件, 调用插件的apply方法 * 4. 执行剩下的编译流程, 触发各个hook事件 */ class BannerWebpackPlugin { constructor() { } apply(compiler) { // emit 文件输出前, tapAsync 异步 compiler.hooks.emit.tapAsync("BannerWebpackPlugin", compilation => { // 获取输出资源: compilation.assets // 只处理 js , css, 图片不能处理 const extensions = ['css', 'js'] // 获取需要处理的文件类型 const assets = Object.keys(compilation.assets).filter(asset => { const arr = asset.split('.') const fileExt = arr[arr.length - 1] return extensions.includes(fileExt) }) const prefix = `/* * Author: 法外狂徒 */ ` assets.forEach(asset => { // 获取原来的内容 source() const source = compilation.assets[asset].source() const content = prefix + source compilation.assets[asset] = { // 最终输出资源时,调用source方法, source方法的返回值是资源的具体内容 source() { return content }, // 资源大小 size() { return content.length } } }) }) } } module.exports = BannerWebpackPlugin
使用
const BannerWebpackPlugin = require('../plugins/banner-webpack-plugin') new BannerWebpackPlugin()
这篇关于plugin的原理的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-01为什么公共事业机构会偏爱 TiDB :TiDB 数据库在某省妇幼健康管理系统的应用
- 2024-04-26敏捷开发:想要快速交付就必须舍弃产品质量?
- 2024-04-26静态代码分析的这些好处,我竟然都不知道?
- 2024-04-26你在测试金字塔的哪一层?(下)
- 2024-04-26快刀斩乱麻,DevOps让代码评审也自动起来
- 2024-04-262024年最好用的10款ER图神器!
- 2024-04-2203-为啥大模型LLM还没能完全替代你?
- 2024-04-2101-大语言模型发展
- 2024-04-17基于SpringWeb MultipartFile文件上传、下载功能
- 2024-04-14个人开发者,Spring Boot 项目如何部署