• webpack打包原理--webapck-cli及Tapable

    一、webpack-cli

    （1）作用

    • 引入 yargs，对命令行进行定制
    • 分析命令行参数，对各个参数进行转换，组成编译配置项
    • 引用webpack，根据配置项进行编译和构建 

    （2） 命令行工具包 yargs

    • 提供命令和分组参数
    • 动态生成 help 帮助信息

     

     （3）webpack-cli 使用 args 分析

    参数分组 (config/config-args.js)，将命令划分为9类：

    • Config options: 配置相关参数(文件名称、运行环境等)
    • Basic options: 基础参数(entry设置、debug模式设置、watch监听设置、devtool设置)
    • Module options: 模块参数，给 loader 设置扩展
    • Output options: 输出参数(输出路径、输出文件名称)
    • Advanced options: 高级用法(记录设置、缓存设置、监听频率、bail等)
    • Resolving options: 解析参数(alias 和 解析的文件后缀设置)
    • Optimizing options: 优化参数
    • Stats options: 统计参数
    • options: 通用参数(帮助命令、版本信息等)

    （4） webpack-cli 执行的结果

    1、webpack-cli对配置文件和命令行参数进行转换最终生成配置选项参数 options

    2、最终会根据配置参数实例化 webpack 对象，然后执行构建流程 

    二、Tapable

    （1）意义

    Tapable 是一个类似于 Node.js 的 EventEmitter 的库, 主要是控制钩子函数的发布与订阅，控制着 webpack 的插件系统。

    （2）Tapable库暴露了很多 Hook（钩子）类，为插件提供挂载的钩子

    （3）Tapable hooks 类型 

     （4）Tapable 的使用 -new Hook 新建钩子

    1、Tapable 暴露出来的都是类方法，new 一个类方法获得我们需要的钩子

    2、class 接受数组参数 options ，非必传。类方法会根据传参，接受同样数量的参数。

    const hook1 = new SyncHook(["arg1", "arg2", "arg3"]);

     （5）Tapable 的使用-钩子的绑定与执行

    Tapable 提供了同步&异步绑定钩子的方法，并且他们都有绑定事件和执行事件对 应的方法。

     （6）Tapable 的使用-hook 基本用法示例

    1. const hook1 = new SyncHook(["arg1", "arg2", "arg3"]); 
    2. //绑定事件到webapck事件流 
    3. hook1.tap('hook1', (arg1, arg2, arg3) => console.log(arg1, arg2, arg3)) //1,2,3 
    4. //执行绑定的事件 
    5. hook1.call(1,2,3)

     （7）Tapable 的使用-实际例子演示

    1、定义一个 Car 方法，在内部 hooks 上新建钩子。

    2、分别是同步钩子 accelerate、 brake（ accelerate 接受一个参数）、异步钩子 calculateRoutes

    3、使用钩子对应的绑定和执行方法 calculateRoutes

    4、使用 tapPromise 可以返回一个 promise 对象 

    1. const {
    2.     SyncHook,
    3.     AsyncSeriesHook
    4. } = require('tapable');
    5.  
    6. class Car {
    7.     constructor() {
    8.         this.hooks = {
    9.             accelerate: new SyncHook(['newspeed']),
    10.             brake: new SyncHook(),
    11.             calculateRoutes: new AsyncSeriesHook(["source", "target", "routesList"])
    12.         }
    13.     }
    14. }
    15.  
    16.  
    17. const myCar = new Car();
    18.  
    19. //绑定同步钩子
    20. myCar.hooks.brake.tap("WarningLampPlugin", () => console.log('WarningLampPlugin'));
    21.  
    22. //绑定同步钩子 并传参
    23. myCar.hooks.accelerate.tap("LoggerPlugin", newSpeed => console.log(`Accelerating to ${newSpeed}`));
    24.  
    25. //绑定一个异步Promise钩子
    26. myCar.hooks.calculateRoutes.tapPromise("calculateRoutes tapPromise", (source, target, routesList, callback) => {
    27.     // return a promise
    28.     return new Promise((resolve,reject)=>{
    29.         setTimeout(()=>{
    30.             console.log(`tapPromise to ${source} ${target} ${routesList}`)
    31.             resolve();
    32.         },1000)
    33.     })
    34. });
    35.  
    36.  
    37. myCar.hooks.brake.call();
    38. myCar.hooks.accelerate.call(10);
    39.  
    40. console.time('cost');
    41.  
    42. //执行异步钩子
    43. myCar.hooks.calculateRoutes.promise('Async', 'hook', 'demo').then(() => {
    44.     console.timeEnd('cost');
    45. }, err => {
    46.     console.error(err);
    47.     console.timeEnd('cost');
    48. });

     （8）Tapable 是如何和 webpack 联系起来的

    1、核心对象 Compiler 继承 Tapable

    2、核心对象 Compilation 继承 Tapable

     3、node_modules/webpack/lib/webpack.js

    1. const webpack = (options, callback) => {
    2. 	const webpackOptionsValidationErrors = validateSchema(
    3. 		webpackOptionsSchema,
    4. 		options
    5. 	);
    6. 	if (webpackOptionsValidationErrors.length) {
    7. 		throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
    8. 	}
    9. 	let compiler;
    10. 	if (Array.isArray(options)) {
    11. 		compiler = new MultiCompiler(
    12. 			Array.from(options).map(options => webpack(options))
    13. 		);
    14. 	} else if (typeof options === "object") {
    15.     //初始化默认配置等
    16. 		options = new WebpackOptionsDefaulter().process(options);
    17.  
    18. 		compiler = new Compiler(options.context);
    19. 		compiler.options = options;
    20.     //内部插件（插件必须有个aplly，传入参数compiler）
    21. 		new NodeEnvironmentPlugin({
    22. 			infrastructureLogging: options.infrastructureLogging
    23. 		}).apply(compiler);
    24.     //配置或命令行的插件组装成的options（通过webpack-cli生成）
    25. 		if (options.plugins && Array.isArray(options.plugins)) {
    26.       //遍历将compiler传递给每个插件，插件监听compiler里的hooks事件，
    27.       //一旦触发事件，插件就会执行相应方法
    28. 			for (const plugin of options.plugins) {
    29. 				if (typeof plugin === "function") {
    30. 					plugin.call(compiler, compiler);
    31. 				} else {
    32. 					plugin.apply(compiler);
    33. 				}
    34. 			}
    35. 		}
    36. 		compiler.hooks.environment.call();
    37. 		compiler.hooks.afterEnvironment.call();
    38.     //加入内置插件
    39. 		compiler.options = new WebpackOptionsApply().process(options, compiler);
    40. 	} else {
    41. 		throw new Error("Invalid argument: options");
    42. 	}
    43. 	if (callback) {
    44. 		if (typeof callback !== "function") {
    45. 			throw new Error("Invalid argument: callback");
    46. 		}
    47. 		if (
    48. 			options.watch === true ||
    49. 			(Array.isArray(options) && options.some(o => o.watch))
    50. 		) {
    51. 			const watchOptions = Array.isArray(options)
    52. 				? options.map(o => o.watchOptions || {})
    53. 				: options.watchOptions || {};
    54. 			return compiler.watch(watchOptions, callback);
    55. 		}
    56. 		compiler.run(callback);
    57. 	}
    58. 	return compiler;
    59. };

     （9）模拟 Compiler.js

    1. const {
    2.     SyncHook,
    3.     AsyncSeriesHook
    4. } = require('tapable');
    5.  
    6. module.exports = class Compiler {
    7.     constructor() {
    8.         this.hooks = {
    9.             accelerate: new SyncHook(['newspeed']),
    10.             brake: new SyncHook(),
    11.             calculateRoutes: new AsyncSeriesHook(["source", "target", "routesList"])
    12.         }
    13.     }
    14.     run(){
    15.         this.accelerate(10)
    16.         this.break()
    17.         this.calculateRoutes('Async', 'hook', 'demo')
    18.     }
    19.     accelerate(speed) {
    20.         this.hooks.accelerate.call(speed);
    21.     }
    22.     break() {
    23.         this.hooks.brake.call();
    24.     }
    25.     calculateRoutes() {
    26.         this.hooks.calculateRoutes.promise(...arguments).then(() => {
    27.         }, err => {
    28.             console.error(err);
    29.         });
    30.     }
    31. }

    （10）插件 my-plugin.js

    1. const Compiler = require('./Compiler')
    2.  
    3. class MyPlugin{
    4.     constructor() {
    5.  
    6.     }
    7.     apply(compiler){
    8.         compiler.hooks.brake.tap("WarningLampPlugin", () => console.log('WarningLampPlugin'));
    9.         compiler.hooks.accelerate.tap("LoggerPlugin", newSpeed => console.log(`Accelerating to ${newSpeed}`));
    10.         compiler.hooks.calculateRoutes.tapPromise("calculateRoutes tapAsync", (source, target, routesList) => {
    11.             return new Promise((resolve,reject)=>{
    12.                 setTimeout(()=>{
    13.                     console.log(`tapPromise to ${source} ${target} ${routesList}`)
    14.                     resolve();
    15.                 },1000)
    16.             });
    17.         });
    18.     }
    19. }

     （11）模拟插件执行

    1. const Compiler = require('./Compiler')
    2.  
    3. const myPlugin = new MyPlugin();
    4.  
    5. const options = {
    6.     plugins: [myPlugin]
    7. }
    8.  
    9. const compiler = new Compiler();
    10.  
    11. for (const plugin of options.plugins) {
    12.     if (typeof plugin === "function") {
    13.         plugin.call(compiler, compiler);
    14.     } else {
    15.         plugin.apply(compiler);
    16.     }
    17. }
    18. compiler.run();
  • 相关阅读:
    C# 常量
    【JVM】JVM表示浮点数
    java的反射
    17、Flink 之Table API: Table API 支持的操作（1）
    运行手写数字识别例程出现cuDNN Error: cudnnConvolutionForward failed
    [计算机动画]Games103-作业1-刚体动画
    armv8 smpen设置
    【电源专题】为开关稳压器选择正确的工作频率
    虚拟摄像头驱动程序彻底分析
    [附源码]计算机毕业设计springboot校园招聘系统设计
  • 原文地址：https://blog.csdn.net/qq_40542728/article/details/125555477