引言

webpack@5.69.0
之前应用taro@3.5.5创立一个taro-react我的项目之后build了一个weapp我的项目

最初一步就是启用webpack把react代码编译成weapp

webpack入口

在package.json中能够找到入口文件
这个文件的作用就是引入webpack外围函数（lib/webpack.js）以及工具文件，抛出整顿好之后的webpack外围函数

"main": "lib/index.js",

  1. 最终输入：

    // lib/index.js// mergeExports是解决fn的，最初输入的就是后果解决的fnmodule.exports = mergeExports(fn, { // 很多文件的引入 get webpack() {     return require("./webpack"); // 外围文件 }, ......})

  2. mergeExports

    // lib/index.js// 第一个参数是对象（函数继承于Fuction，Fuction继承于Object）const mergeExports = (obj, exports) => { // 克隆exports对象，传入这个对象里有很多的文件的引入 const descriptors = Object.getOwnPropertyDescriptors(exports); // 遍历这个对象 for (const name of Object.keys(descriptors)) {     const descriptor = descriptors[name];     if (descriptor.get) {         const fn = descriptor.get;         // 遍历出的属性一个个增加getter到传入的webpack函数         Object.defineProperty(obj, name, {             configurable: false,             enumerable: true,             /**               * memoize就是执行了传入的fn返回一个返回执行之后的后果的一个函数               * memoize(fn)等于               * function(){               *   return fn();               * }                */             get: memoize(fn)         });     } else if (typeof descriptor.value === "object") {         Object.defineProperty(obj, name, {             configurable: false,             enumerable: true,             writable: false,             value: mergeExports({}, descriptor.value) // 递归         });     } else {         throw new Error(             "Exposed values must be either a getter or an nested object"         );     } } // 返回了一个解冻之后的对象，这个对象是个函数，函数外面有很多增加进去的属性办法 return /** @type {A & B} */ (Object.freeze(obj)); };

    打印descriptor能够失去如下

    {  get: [Function: get webpack],  set: undefined,  enumerable: true,  configurable: true}...{  value: { ModuleDependency: [Getter], ConstDependency: [Getter], NullDependency: [Getter]  },  writable: true,  enumerable: true,  configurable: true}...

    打印最终返回的

    [Function: f] {  webpack: [Getter],  validate: [Getter],  validateSchema: [Getter],  version: [Getter],  cli: [Getter],  AutomaticPrefetchPlugin: [Getter],  AsyncDependenciesBlock: [Getter],  BannerPlugin: [Getter],  Cache: [Getter],  Chunk: [Getter],  ChunkGraph: [Getter],  CleanPlugin: [Getter],  Compilation: [Getter],  Compiler: [Getter],  ConcatenationScope: [Getter],  ContextExclusionPlugin: [Getter],  ContextReplacementPlugin: [Getter],  DefinePlugin: [Getter],  DelegatedPlugin: [Getter],  Dependency: [Getter],  DllPlugin: [Getter],  DllReferencePlugin: [Getter],  DynamicEntryPlugin: [Getter],  EntryOptionPlugin: [Getter],  EntryPlugin: [Getter],  EnvironmentPlugin: [Getter],  EvalDevToolModulePlugin: [Getter],  EvalSourceMapDevToolPlugin: [Getter],  ExternalModule: [Getter],  ExternalsPlugin: [Getter],  Generator: [Getter],  HotUpdateChunk: [Getter],  HotModuleReplacementPlugin: [Getter],  IgnorePlugin: [Getter],  JavascriptModulesPlugin: [Getter],  LibManifestPlugin: [Getter],  LibraryTemplatePlugin: [Getter],  LoaderOptionsPlugin: [Getter],  LoaderTargetPlugin: [Getter],  Module: [Getter],  ModuleFilenameHelpers: [Getter],  ModuleGraph: [Getter],  ModuleGraphConnection: [Getter],  NoEmitOnErrorsPlugin: [Getter],  NormalModule: [Getter],  NormalModuleReplacementPlugin: [Getter],  MultiCompiler: [Getter],  Parser: [Getter],  PrefetchPlugin: [Getter],  ProgressPlugin: [Getter],  ProvidePlugin: [Getter],  RuntimeGlobals: [Getter],  RuntimeModule: [Getter],  SingleEntryPlugin: [Getter],  SourceMapDevToolPlugin: [Getter],  Stats: [Getter],  Template: [Getter],  UsageState: [Getter],  WatchIgnorePlugin: [Getter],  WebpackError: [Getter],  WebpackOptionsApply: [Getter],  WebpackOptionsDefaulter: [Getter],  WebpackOptionsValidationError: [Getter],  ValidationError: [Getter],  cache: { MemoryCachePlugin: [Getter] },  config: { getNormalizedWebpackOptions: [Getter], applyWebpackOptionsDefaults: [Getter]  },  dependencies: { ModuleDependency: [Getter], ConstDependency: [Getter], NullDependency: [Getter]  },  ids: { ChunkModuleIdRangePlugin: [Getter], NaturalModuleIdsPlugin: [Getter], OccurrenceModuleIdsPlugin: [Getter], NamedModuleIdsPlugin: [Getter], DeterministicChunkIdsPlugin: [Getter], DeterministicModuleIdsPlugin: [Getter], NamedChunkIdsPlugin: [Getter], OccurrenceChunkIdsPlugin: [Getter], HashedModuleIdsPlugin: [Getter]  },  javascript: { EnableChunkLoadingPlugin: [Getter], JavascriptModulesPlugin: [Getter], JavascriptParser: [Getter]  },  optimize: { AggressiveMergingPlugin: [Getter], AggressiveSplittingPlugin: [Getter], InnerGraph: [Getter], LimitChunkCountPlugin: [Getter], MinChunkSizePlugin: [Getter], ModuleConcatenationPlugin: [Getter], RealContentHashPlugin: [Getter], RuntimeChunkPlugin: [Getter], SideEffectsFlagPlugin: [Getter], SplitChunksPlugin: [Getter]  },  runtime: { GetChunkFilenameRuntimeModule: [Getter], LoadScriptRuntimeModule: [Getter]  },  prefetch: { ChunkPrefetchPreloadPlugin: [Getter] },  web: { FetchCompileAsyncWasmPlugin: [Getter], FetchCompileWasmPlugin: [Getter], JsonpChunkLoadingRuntimeModule: [Getter], JsonpTemplatePlugin: [Getter]  },  webworker: { WebWorkerTemplatePlugin: [Getter] },  node: { NodeEnvironmentPlugin: [Getter], NodeSourcePlugin: [Getter], NodeTargetPlugin: [Getter], NodeTemplatePlugin: [Getter], ReadFileCompileWasmPlugin: [Getter]  },  electron: { ElectronTargetPlugin: [Getter] },  wasm: { AsyncWebAssemblyModulesPlugin: [Getter] },  library: { AbstractLibraryPlugin: [Getter], EnableLibraryPlugin: [Getter] },  container: { ContainerPlugin: [Getter], ContainerReferencePlugin: [Getter], ModuleFederationPlugin: [Getter], scope: [Getter]  },  sharing: { ConsumeSharedPlugin: [Getter], ProvideSharedPlugin: [Getter], SharePlugin: [Getter], scope: [Getter]  },  debug: { ProfilingPlugin: [Getter] },  util: { createHash: [Getter], comparators: [Getter], runtime: [Getter], serialization: [Getter], cleverMerge: [Getter], LazySet: [Getter]  },  sources: [Getter],  experiments: { schemes: { HttpUriPlugin: [Getter] }, ids: { SyncModuleIdsPlugin: [Getter] }  }}

  3. fn：

    // lib/index.js// fn懒加载进去的webpack外围函数const fn = lazyFunction(() => require("./webpack"));

  4. lazyFunction：这里咱们能够晓得webpack外围函数（lib/webpack）是怎么承受参数的

    // lib/index.jsconst lazyFunction = factory => { // 和mergeExports一样返回一个返回执行了factory后的函数 const fac = memoize(factory); // fac函数一个函数 const f = (     // 这里args就是咱们传入的webpack配置参数     (...args) => {        /**           * fac() 等于 factory()          * fac()(...args) 等于 factory()(...args)          * factory 等于 () => require("./webpack")          * require("./webpack")(...args)          */         return fac()(...args);      } ); return (f);// 最初返回f这个函数，在mergeExports里getter增加之后作为入口抛出，在webpack启动器里传入webpack配置参数执行};

    webpack.js

    lib/webpack.js