webpack原理 (6)

在 start中调用定义的钩子

start() { this.hooks.compiler.call() // 开始编译 this.depAnalyse(path.resolve(this.root, this.entry)) this.hooks.afterCompiler.call() //编译完成了 this.hooks.emit.call() // 开始发射文件 this.emitFile() this.hooks.done.call() // 完成 } 补充 AST

就是将一行代码解析成对象的格式,可以使用在线工具生成ast语法树 astexplorer 进行查看

安装@babel/parser插件

npm i -S @babel/parser

使用

const parser = require('@babel/parser') //source是需要生成ast语法树的代码片段 const ast = parser.parse(source)

生成效果

源码

const news = require('./news') console.log(news.content)

生成的ast语法树

Node { type: 'File', start: 0, end: 57, loc: SourceLocation { start: Position { line: 1, column: 0 }, end: Position { line: 3, column: 25 } }, program: Node { type: 'Program', start: 0, end: 57, loc: SourceLocation { start: [Position], end: [Position] }, sourceType: 'script', interpreter: null, body: [ [Node], [Node] ], directives: [] }, comments: [] } tabable

在webpack内部实现事件流机制的核心就在于tapable，有了它就可以通过事件流的形式，将各个插件串联起来，tapable类似于node中的events库，核心原理就是一个订阅发布模式

基本用法

定义钩子

使用者注册事件

在合适的阶段调用钩子，触发事件

const { SyncHook } = require('tapable') /** * 学习前端 * 学习过程 1.准备 2.学html 3.学css 4.学js 5.学框架 * 学习的每个过程就类似于生命周期 */ class Frontend{ constructor(){ // 1. 定义生命周期钩子 this.hooks = { beforeStudy: new SyncHook(), afterHtml: new SyncHook(), afterCss: new SyncHook(), afterJs: new SyncHook(), // 需要传递的参数 需要在 new SyncHook() 的时候定义好 afterFrame: new SyncHook(['name']), } } study(){ // 3. 在合适的时候 调用 console.log('准备'); this.hooks.beforeStudy.call() console.log('准备学html'); this.hooks.afterHtml.call() console.log('准备学css'); this.hooks.afterCss.call() console.log('准备学js'); this.hooks.afterJs.call() console.log('准备学框架'); this.hooks.afterFrame.call('vue、react') } } const f = new Frontend() // 2. 注册事件 f.hooks.afterHtml.tap('afterHtml', () => { console.log('学完html，完成了一部分前端知识'); }) f.hooks.afterJs.tap('afterJs', () => { console.log('学完js，完成了一部分前端知识'); }) f.hooks.afterFrame.tap('afterFrame', (name) => { console.log(`学完了${name}框架，天下无敌....`); }) f.study()