自动插入external script标签的插件：

    2. const { ExternalModule } = require('webpack');
    3. const HtmlWebpackPlugin = require('html-webpack-plugin');
    4. class AutoExternalPlugin {
    5.     constructor(options) {
    6.         this.options = options;
    7.         ///可以进行外部依赖的模块数组
    8.         this.externalModules = Object.keys(this.options);//['lodash']
    9.         //存放着所有的实际用到的外部依赖
    10.         this.importedModules = new Set();//[]
    11.     }
    12.     /**
    13.      * 1.收集依赖，我需要知道这个项目中一共到底用到了哪些外部依赖模块，放到importedModules里面
    14.      * 2.拦截生成模块的流程，如果它是一个外部模块话，就不要走原始的打包流程了，而用一个外部模块进行替代
    15.      * 3.把实用到的依赖模块对应的CDN脚本插入到输出的index.html里面去
    16.      * @param {*} compiler 
    17.      */
    18.     apply(compiler) {
    19.         //获取普通模块的工厂
    20.         compiler.hooks.normalModuleFactory.tap('AutoExternalPlugin', (normalModuleFactory) => {
    21.             normalModuleFactory.hooks.parser
    22.                 .for('javascript/auto')
    23.                 .tap('AutoExternalPlugin', parser => {
    24.                     //parser会负责把源代码转成AST语法树，并且进行遍历，如果发现了import语句话，就触发回调
    25.                     parser.hooks.import.tap('AutoExternalPlugin', (statement, source) => {
    26.                         if (this.externalModules.includes(source)) {
    27.                             this.importedModules.add(source);//如果走到了这里，就表示代码中实际用到了lodash这个模块
    28.                         }
    29.                     });
    30.                     //监听CallExpression语法树节点，如果方法名是require的话
    31.                     parser.hooks.call.for('require').tap('AutoExternalPlugin', (callExpression) => {
    32.                         let source = callExpression.arguments[0].value;
    33.                         if (this.externalModules.includes(source)) {
    34.                             this.importedModules.add(source);//如果走到了这里，就表示代码中实际用到了lodash这个模块
    35.                         }
    36.                     });
    37.                 })
    38.             normalModuleFactory.hooks.factorize.tapAsync('AutoExternalPlugin', (resolveData, callback) => {
    39.                 let { request } = resolveData;//lodash
    40.                 if (this.importedModules.has(request)) {
    41.                     let { globalVariable } = this.options[request];//_
    42.                     //如果返回的是一个外部模块，则不需要按正常模块生产流程执行
    43.                     callback(null, new ExternalModule(globalVariable));
    44.                 } else {
    45.                     //读取模块源代码，传递给loader再返回JS模块，再解析依赖，再返回此模块
    46.                     callback(null);//NormalModule 普通模块
    47.                 }
    48.             });
    49.         });
    50.         compiler.hooks.compilation.tap('AutoExternalPlugin', (compilation) => {
    51.             //1.HtmlWebpackPlugin内部会向compilation对象上添加额外的钩子
    52.             //2.可以通过HtmlWebpackPlugin.getHooks取现这些钩子
    53.             //3.改变标签
    54.             HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tapAsync('AutoExternalPlugin', (htmlData, callback) => {
    55.                 [...this.importedModules].forEach(key => {
    56.                     htmlData.assetTags.scripts.unshift({
    57.                         tagName: 'script',
    58.                         voidTag: false,
    59.                         meta: { plugin: 'html-webpack-plugin' },
    60.                         attributes: { src: this.options[key].url }
    61.                     });
    62.                 });
    63.                 callback(null, htmlData);
    64.             });
    65.         });
    66.     }
    67. }
    68. module.exports = AutoExternalPlugin;

    在第38行，用到了normalModuleFactory对象的factorize钩子，这个钩子是AsyncSeriesBailHook类型的，这种类型的钩子在依次执行各个回调时，会同时检测回调执行的返回值，如果找到了返回值，则后面的回调就都不执行了
    盲猜这个钩子是用来获取模块或模块定义的（此处需要再详细地跟踪源码查看），当我们给它一个回调，返回我们自己定义的外部模块的对象定义时，就不会再往后执行其他回调了