webpack核心模块解析

核心模块比较抽象，距离咱们比较远，让咱们一步步到达

（一）webpack中的钩子

webpack的运行分不少阶段，每一个阶段都有一个钩子，咱们能够在钩子上注册咱们自定义的插件。
注册后，咱们自定义的插件会在钩子运行阶段执行。
webpack的钩子 webpack.docschina.org/api/compile…

（二）webpack中的插件定位

插件目的在于解决 loader 没法实现的其余事。
插件是 webpack 的 支柱 功能。 webpack 自身也是构建于插件系统之上！

（三）webpack中自定义插件应用

（1）定义插件

pulgins/TestPlugin1.js(自定义文件地址)

/* eslint-disable no-console */
class TestPlugin1 {
  constructor(options) {
    console.log('options1:' + options)
  }
  apply(compiler) {
    compiler.hooks.entryOption.tap('TestPlugin1', (...args) => {
      console.log(args)
    })
  }
}

module.exports = TestPlugin1
复制代码

（2）使用插件

webpack.config.js（能够配置webpack拓展的地方）

const TestPlugin1 = require('plugins/TestPlugin1.js')
plugins: [
  new TestPlugin1('have a test'),
]
复制代码

（四）插件类型

插件类型分为 tap、tapAsync、tapPromise
其中，tap是同步；tapAsync、tapPromise是异步
webpack.docschina.org/api/plugins…

compiler.hooks.compile.tap('MyPlugin', params => {
  console.log('以同步方式触及 compile 钩子。');
})
compiler.hooks.run.tapAsync('MyPlugin', (source, target, routesList, callback) => {
  console.log('以异步方式触及 run 钩子。');
  callback();
});

compiler.hooks.run.tapPromise('MyPlugin', (source, target, routesList) => {
  return new Promise(resolve => setTimeout(resolve, 1000)).then(() => {
    console.log('以具备延迟的异步方式触及 run 钩子。');
  });
});
复制代码

（五）核心模块tapable

github.com/webpack/tap…
这篇文章中的README.md，讲述了tapable的基本用法，和webpack的钩子及插件一致。由于webpack的Compiler和Compilation都继承自tapable

（六）tapable的源码解读

segmentfault.com/a/119000001…
这篇源码解读很是细致，值得一看，文中有两个小小瑕疵，看完以后，注意下便可：
1.文中capTap实为callTap
2.最后输出的call方法中，所有是_interceptors[0]，没有_interceptors[1,2,3],由于开篇只预设了一个interceptor

至此，就解开了webpack的架构基石。