关于webpack:webpack把react编译成weapp

引言

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 的，最初输入的就是后果解决的 fn
   module.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.js
   const 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