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的架構基石。