{"componentChunkName":"component---src-templates-blog-post-js","path":"/2019/12/17/【webpack配置】二、插件系统/","result":{"data":{"content":{"edges":[{"node":{"id":"6b15bf89-919c-5c2f-9879-8fdb5e43472d","html":"

webpack本身可以定义为事件驱动、基于插件的打包器。插件是webpack生态系统的关键拼图，使得社区开发者可以hook到关键事件中、可以侵入到webpack的编译过程的每一切面。

\n

AOP

\n

AOP（Aspect-Oriented Programming）：面向切面编程，是对面向对象编程的扩充，在实现对关注点模块化扩展的同时，保证了与原系统的低耦合性。即使你没了解过这个思想，在日常的开发工作中，像表单验证、埋点日志收集、路由钩子、装饰器decorators等场景，都有这种模式的影子。

\n

webpack的tapable就是遵循AOP模式的一个实现。

\n

Tapable

\n

Tapable作为webpack扩展功能的骨架与核心，与Nodejs的EventEmitter类似。扩展tapable的类和对象，我们称之为tapable实例，即是我们通常所说的插件。借助tapable提供的钩子，我们可以侵入到编译阶段的每个过程中。\n\"Tapable

\n

通过一个简单的demo，看一下Tapable的基本用法👇：

\n
// 为了测试拦截器的loop，我们选用loopHook\nconst {SyncLoopHook} = require('tapable');\n\nconst syncLoopHook = new SyncLoopHook(['name', 'age']);\n\n// tap第一个插件，传入上下文\nsyncLoopHook.tap({\n    name: 'firstPlugin',\n    context: true\n}, (context, name, age) => console.log({name, age, ...context}));\n\n// tap第零个插件，放在第一个前面\nsyncLoopHook.tap({\n    name: 'zeroPlugin',\n    before: 'firstPlugin'\n}, (name, age) => console.log({name, age}));\n\n// 添加上下文，观察call、register、loop、tap四个阶段\nsyncLoopHook.intercept({\n    context: true,\n    call: (context, ...args) => console.log('arguments: ', ...args),\n    register: tap => console.log('tap name: ', tap.name) || tap,\n    loop: (context, ...args) => console.log('loop args: ', ...args),\n    tap: (context, tap) => {\n        console.log('tap event: ', tap);\n        if (context) {\n            context.name = 'John';\n            context.age = 36;\n        }\n    }\n});\n\n// call the hook\nsyncLoopHook.call('David', 25);
\n

通过控制台的输出，可以看到Tapable整个流程为register➡️call➡️loop➡️tap➡️tap callback。

\n

网上介绍这个API的文章很多，在这儿就不赘述了，建议直接看github的README。

\n

webpack工作流

\n

要写好一个插件，必须了解webpack插件的这些切面是如何工作的。

\n

通用模块打包器的大致流程是依赖解析➡️模块映射➡️打包，在webpack中，为了使用nodeJS的文件系统，第一个被这样处理的就是NodeEnvironmentPlugin。

\n

下面是webpack的七大模块：\n\"webpack

\n

开机键Compiler

\n

Compiler的作用可以用两行伪代码来表示：

\n
const webpack = require('webpack');\nconst compiler = webpack(someConfig);
\n

作为插件开发者，需要从webpack机制/流程/事件发生的时间点来切入，添加你想实现的功能及特性，compiler作为top-level实例，同时也是webpack runtime, 正担任这个角色。它控制着webpack的启动与停止，使你能用上run、emit这些钩子。

\n

藏宝图Compilation

\n

compilation作为compiler的产物，描绘了整个app依赖关系的深度遍历藏宝图，webpack通过compilation掌握你的代码依赖全貌。webpack的load, seal, optimize, chunk, hash都在这一阶段完成，因此具有optimize-modules、seal及optimize-chunk-assets等hook。

\n

\"webpack-compilaton\"

\n

寻路resolver

\n

类似于nodejs的resolver处理文件路径，webpack的resolver由enhanced-resolver创建。我们也可以通过resolveLoader或者自己编写插件自定义模块解析策略。

\n

\"webpack-resolver\"

\n

同声传译loaders

\n

在resolve文件依赖进行build过程中，肯定会寻找到非JS的文件。这时就需要loader根据ruleSet将!@#$%$^&变成标准模块，加到chunk中。

\n

模块工厂Module Factory

\n

ModuleFactory将resolver、loaders和源模块实例零件进行黏合加工，产出模块对象到内存中。\n除了Normal类型之外，还有ContextFactory用于处理上下文的动态依赖。

\n

\"webpack-module-factory\"

\n

寻宝科学家Parser

\n

AST是计算机与人类的桥梁，Parser是Module与bundle Template的桥梁。webpack parser使用的是acorn引擎实现AST。

\n

\"webpack-parser\"

\n

圣诞树的外衣Template

\n

template顾名思义作为文件输出的数据模版，将template subclass组合到一起，生成最后打包文件的框架结构。当然，由于模块类型的不同，template有多种类型，包括:

\n\n

\"webpack-template\"

\n

总结

\n

当我们开启热更新的时候，webpack会按照这种运作机制不断地解析文件、生成依赖图、输出bundle文件。正是因为webpack采用基于切面设计的插件系统和基于插件的运作体系，我们才能够编写优秀的自定义插件实现增量更新，才能够根据差异性的应用场景持续添加特性，达成科学快速的工程化解决方案。

\n

相关资料

\n
    \n
  1. artsy-webpack-tour
    2. \n
  2. The Contributors Guide to webpack — Part 2\n
    3. \n
  3. webpack4核心模块tapable源码解析
    4. \n
  4. Creating a Custom webpack Plugin\n
    5. \n
  5. 头图来自：从Webpack源码探究打包流程，萌新也能看懂～
    6. \n
  6. 插图部分来自：everything-is-a-plugin
    7. \n
","fields":{"slug":"/【webpack配置】二、插件系统/"},"tableOfContents":"","frontmatter":{"id":null,"description":"Sean Larkin曾在演讲中表示，webpack中80%的部分都是由插件机制完成。随着我们对webpack研究的深入，会发现其内部的每样东西，都被模块化为单一职责的工具抽象类。","title":"【webpack配置】二、插件系统","slug":"/","date":"2019年12月17日","tags":["webpack","tapable"],"headerImage":" https://2img.net/h/i968.photobucket.com/albums/ae170/laughingjacky/Blog%20Assets%202019/webpacn-series-2-headimage_zps1wcoczne.png"}},"previous":null,"next":null}]},"site":{"siteMetadata":{"title":"王晓博 - 银河系漫游指南","description":"如果这个博客好久不更新了,说明我更浑浑噩噩了"}}},"pageContext":{"id":"6b15bf89-919c-5c2f-9879-8fdb5e43472d","index":1}},"staticQueryHashes":[]}