实现分析

  • webpack本质是一个事件流机制，核心模块：tapable(Sync + Async)Hooks 构造出 === Compiler(编译) + Compilation(创建bundles)
  • compiler对象代表了完整的webpack环境配置。这个对象在启动webpack时被一次性建立，并配置好所有可操作的设置，包括options、loader和plugin。当在webpack环境中应用一个插件时，插件将收到此compiler对象的引用。可以使用它来访问webpack的主环境
  • compilation对象代表了一次资源版本构建。当运行webpack开发环境中间件时，每当检测到一个文件变化，就会创建一个新的compilation，从而生成一个新的编译资源。一个compilation对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态的信息。compilation对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用
  • 创建一个插件函数，在其prototype上定义apply方法，指定一个webpack自身的事件钩子
  • 函数内部处理webpack内部实例的特定数据
  • 处理完成后，调用webpack提供的回调函数
  1. function MyWebpackPlugin(){
  3. };
  4. //prototype上定义apply方法
  5. MyWebpackPlugin.prototype.apply=function(){
  6.     //指定一个事件函数挂载到webpack
  7.     compiler.plugin("webpacksEventHook",funcion (compiler){
  8.         console.log("这是一个插件");
  9.         //功能完成调用后webpack提供的回调函数
  10.         callback()
  11.     })
  12. }