webpack<\/code>@5.69.0<\/a>
\u4e4b\u524d\u4f7f\u7528taro@3.5.5<\/code>\u521b\u5efa\u4e00\u4e2ataro-react\u9879\u76ee<\/a>\u4e4b\u540ebuild\u4e86\u4e00\u4e2aweapp\u9879\u76ee<\/a><\/p>\n![\"image.png\"](\"https:\/\/segmentfault.com\/img\/bVc2vcO\" "\\"image.png\\"")
<\/p>\n
\u6700\u540e\u4e00\u6b65\u5c31\u662f\u542f\u7528webpack<\/code>\u628areact<\/code>\u4ee3\u7801\u7f16\u8bd1\u6210weapp<\/code><\/p>\nwebpack\u5165\u53e3<\/h3>\n
\u5728package.json<\/code>\u4e2d\u53ef\u4ee5\u627e\u5230\u5165\u53e3\u6587\u4ef6
\u8fd9\u4e2a\u6587\u4ef6\u7684\u4f5c\u7528\u5c31\u662f\u5f15\u5165webpack\u6838\u5fc3\u51fd\u6570<\/code>\uff08lib\/webpack.js\uff09\u4ee5\u53ca\u5de5\u5177\u6587\u4ef6\uff0c\u629b\u51fa\u6574\u7406\u597d\u4e4b\u540e\u7684webpack\u6838\u5fc3\u51fd\u6570<\/p>\n"main": "lib\/index.js",<\/code><\/pre>\n\n- \n
\u6700\u7ec8\u8f93\u51fa\uff1a<\/p>\n
\/\/ lib\/index.js\n\/\/ mergeExports\u662f\u5904\u7406fn\u7684\uff0c\u6700\u540e\u8f93\u51fa\u7684\u5c31\u662f\u7ed3\u679c\u5904\u7406\u7684fn\nmodule.exports = mergeExports(fn, {\n \/\/ \u5f88\u591a\u6587\u4ef6\u7684\u5f15\u5165\n get webpack() {\n return require(".\/webpack"); \/\/ \u6838\u5fc3\u6587\u4ef6\n },\n ......\n})<\/code><\/pre>\n<\/li>\n- \n
mergeExports<\/p>\n
\/\/ lib\/index.js\n\/\/ \u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u5bf9\u8c61\uff08\u51fd\u6570\u7ee7\u627f\u4e8eFuction\uff0cFuction\u7ee7\u627f\u4e8eObject\uff09\nconst mergeExports = (obj, exports) => {\n \/\/ \u514b\u9686exports\u5bf9\u8c61\uff0c\u4f20\u5165\u8fd9\u4e2a\u5bf9\u8c61\u91cc\u6709\u5f88\u591a\u7684\u6587\u4ef6\u7684\u5f15\u5165\n const descriptors = Object.getOwnPropertyDescriptors(exports);\n \/\/ \u904d\u5386\u8fd9\u4e2a\u5bf9\u8c61\n for (const name of Object.keys(descriptors)) {\n const descriptor = descriptors[name];\n if (descriptor.get) {\n const fn = descriptor.get;\n \/\/ \u904d\u5386\u51fa\u7684\u5c5e\u6027\u4e00\u4e2a\u4e2a\u6dfb\u52a0getter\u5230\u4f20\u5165\u7684webpack\u51fd\u6570\n Object.defineProperty(obj, name, {\n configurable: false,\n enumerable: true,\n \/**\n * memoize\u5c31\u662f\u6267\u884c\u4e86\u4f20\u5165\u7684fn\u8fd4\u56de\u4e00\u4e2a\u8fd4\u56de\u6267\u884c\u4e4b\u540e\u7684\u7ed3\u679c\u7684\u4e00\u4e2a\u51fd\u6570\n * memoize(fn)\u7b49\u4e8e\n * function(){\n * return fn();\n * } \n *\/\n get: memoize(fn)\n });\n } else if (typeof descriptor.value === "object") {\n Object.defineProperty(obj, name, {\n configurable: false,\n enumerable: true,\n writable: false,\n value: mergeExports({}, descriptor.value) \/\/ \u9012\u5f52\n });\n } else {\n throw new Error(\n "Exposed values must be either a getter or an nested object"\n );\n }\n }\n \/\/ \u8fd4\u56de\u4e86\u4e00\u4e2a\u51bb\u7ed3\u4e4b\u540e\u7684\u5bf9\u8c61\uff0c\u8fd9\u4e2a\u5bf9\u8c61\u662f\u4e2a\u51fd\u6570\uff0c\u51fd\u6570\u91cc\u9762\u6709\u5f88\u591a\u6dfb\u52a0\u8fdb\u53bb\u7684\u5c5e\u6027\u65b9\u6cd5\n return \/** @type {A & B} *\/ (Object.freeze(obj)); \n};<\/code><\/pre>\n\u6253\u5370descriptor<\/code>\u53ef\u4ee5\u5f97\u5230\u5982\u4e0b<\/p>\n{\n get: [Function: get webpack],\n set: undefined,\n enumerable: true,\n configurable: true\n}\n...\n{\n value: {\n ModuleDependency: [Getter],\n ConstDependency: [Getter],\n NullDependency: [Getter]\n },\n writable: true,\n enumerable: true,\n configurable: true\n}\n...\n<\/code><\/pre>\n\u6253\u5370\u6700\u7ec8\u8fd4\u56de\u7684<\/p>\n
[Function: f] {\n webpack: [Getter],\n validate: [Getter],\n validateSchema: [Getter],\n version: [Getter],\n cli: [Getter],\n AutomaticPrefetchPlugin: [Getter],\n AsyncDependenciesBlock: [Getter],\n BannerPlugin: [Getter],\n Cache: [Getter],\n Chunk: [Getter],\n ChunkGraph: [Getter],\n CleanPlugin: [Getter],\n Compilation: [Getter],\n Compiler: [Getter],\n ConcatenationScope: [Getter],\n ContextExclusionPlugin: [Getter],\n ContextReplacementPlugin: [Getter],\n DefinePlugin: [Getter],\n DelegatedPlugin: [Getter],\n Dependency: [Getter],\n DllPlugin: [Getter],\n DllReferencePlugin: [Getter],\n DynamicEntryPlugin: [Getter],\n EntryOptionPlugin: [Getter],\n EntryPlugin: [Getter],\n EnvironmentPlugin: [Getter],\n EvalDevToolModulePlugin: [Getter],\n EvalSourceMapDevToolPlugin: [Getter],\n ExternalModule: [Getter],\n ExternalsPlugin: [Getter],\n Generator: [Getter],\n HotUpdateChunk: [Getter],\n HotModuleReplacementPlugin: [Getter],\n IgnorePlugin: [Getter],\n JavascriptModulesPlugin: [Getter],\n LibManifestPlugin: [Getter],\n LibraryTemplatePlugin: [Getter],\n LoaderOptionsPlugin: [Getter],\n LoaderTargetPlugin: [Getter],\n Module: [Getter],\n ModuleFilenameHelpers: [Getter],\n ModuleGraph: [Getter],\n ModuleGraphConnection: [Getter],\n NoEmitOnErrorsPlugin: [Getter],\n NormalModule: [Getter],\n NormalModuleReplacementPlugin: [Getter],\n MultiCompiler: [Getter],\n Parser: [Getter],\n PrefetchPlugin: [Getter],\n ProgressPlugin: [Getter],\n ProvidePlugin: [Getter],\n RuntimeGlobals: [Getter],\n RuntimeModule: [Getter],\n SingleEntryPlugin: [Getter],\n SourceMapDevToolPlugin: [Getter],\n Stats: [Getter],\n Template: [Getter],\n UsageState: [Getter],\n WatchIgnorePlugin: [Getter],\n WebpackError: [Getter],\n WebpackOptionsApply: [Getter],\n WebpackOptionsDefaulter: [Getter],\n WebpackOptionsValidationError: [Getter],\n ValidationError: [Getter],\n cache: { MemoryCachePlugin: [Getter] },\n config: {\n getNormalizedWebpackOptions: [Getter],\n applyWebpackOptionsDefaults: [Getter]\n },\n dependencies: {\n ModuleDependency: [Getter],\n ConstDependency: [Getter],\n NullDependency: [Getter]\n },\n ids: {\n ChunkModuleIdRangePlugin: [Getter],\n NaturalModuleIdsPlugin: [Getter],\n OccurrenceModuleIdsPlugin: [Getter],\n NamedModuleIdsPlugin: [Getter],\n DeterministicChunkIdsPlugin: [Getter],\n DeterministicModuleIdsPlugin: [Getter],\n NamedChunkIdsPlugin: [Getter],\n OccurrenceChunkIdsPlugin: [Getter],\n HashedModuleIdsPlugin: [Getter]\n },\n javascript: {\n EnableChunkLoadingPlugin: [Getter],\n JavascriptModulesPlugin: [Getter],\n JavascriptParser: [Getter]\n },\n optimize: {\n AggressiveMergingPlugin: [Getter],\n AggressiveSplittingPlugin: [Getter],\n InnerGraph: [Getter],\n LimitChunkCountPlugin: [Getter],\n MinChunkSizePlugin: [Getter],\n ModuleConcatenationPlugin: [Getter],\n RealContentHashPlugin: [Getter],\n RuntimeChunkPlugin: [Getter],\n SideEffectsFlagPlugin: [Getter],\n SplitChunksPlugin: [Getter]\n },\n runtime: {\n GetChunkFilenameRuntimeModule: [Getter],\n LoadScriptRuntimeModule: [Getter]\n },\n prefetch: { ChunkPrefetchPreloadPlugin: [Getter] },\n web: {\n FetchCompileAsyncWasmPlugin: [Getter],\n FetchCompileWasmPlugin: [Getter],\n JsonpChunkLoadingRuntimeModule: [Getter],\n JsonpTemplatePlugin: [Getter]\n },\n webworker: { WebWorkerTemplatePlugin: [Getter] },\n node: {\n NodeEnvironmentPlugin: [Getter],\n NodeSourcePlugin: [Getter],\n NodeTargetPlugin: [Getter],\n NodeTemplatePlugin: [Getter],\n ReadFileCompileWasmPlugin: [Getter]\n },\n electron: { ElectronTargetPlugin: [Getter] },\n wasm: { AsyncWebAssemblyModulesPlugin: [Getter] },\n library: { AbstractLibraryPlugin: [Getter], EnableLibraryPlugin: [Getter] },\n container: {\n ContainerPlugin: [Getter],\n ContainerReferencePlugin: [Getter],\n ModuleFederationPlugin: [Getter],\n scope: [Getter]\n },\n sharing: {\n ConsumeSharedPlugin: [Getter],\n ProvideSharedPlugin: [Getter],\n SharePlugin: [Getter],\n scope: [Getter]\n },\n debug: { ProfilingPlugin: [Getter] },\n util: {\n createHash: [Getter],\n comparators: [Getter],\n runtime: [Getter],\n serialization: [Getter],\n cleverMerge: [Getter],\n LazySet: [Getter]\n },\n sources: [Getter],\n experiments: {\n schemes: { HttpUriPlugin: [Getter] },\n ids: { SyncModuleIdsPlugin: [Getter] }\n }\n}\n<\/code><\/pre>\n<\/li>\n- \n
fn\uff1a<\/p>\n
\/\/ lib\/index.js\n\/\/ fn\u61d2\u52a0\u8f7d\u51fa\u6765\u7684webpack\u6838\u5fc3\u51fd\u6570\nconst fn = lazyFunction(() => require(".\/webpack"));<\/code><\/pre>\n<\/li>\n- \n
lazyFunction\uff1a\u8fd9\u91cc\u6211\u4eec\u53ef\u4ee5\u77e5\u9053webpack\u6838\u5fc3\u51fd\u6570\uff08lib\/webpack\uff09<\/code>\u662f\u600e\u4e48\u63a5\u53d7\u53c2\u6570\u7684<\/p>\n\/\/ lib\/index.js\nconst lazyFunction = factory => {\n \/\/ \u548cmergeExports\u4e00\u6837\u8fd4\u56de\u4e00\u4e2a\u8fd4\u56de\u6267\u884c\u4e86factory\u540e\u7684\u51fd\u6570\n const fac = memoize(factory); \/\/ fac\u51fd\u6570\u4e00\u4e2a\u51fd\u6570\n const f = (\n \/\/ \u8fd9\u91ccargs\u5c31\u662f\u6211\u4eec\u4f20\u5165\u7684webpack\u914d\u7f6e\u53c2\u6570\n (...args) => {\n \/** \n * fac() \u7b49\u4e8e factory()\n * fac()(...args) \u7b49\u4e8e factory()(...args)\n * factory \u7b49\u4e8e () => require(".\/webpack")\n * require(".\/webpack")(...args)\n *\/\n return fac()(...args); \n }\n );\n return (f);\/\/ \u6700\u540e\u8fd4\u56def\u8fd9\u4e2a\u51fd\u6570\uff0c\u5728mergeExports\u91ccgetter\u6dfb\u52a0\u4e4b\u540e\u4f5c\u4e3a\u5165\u53e3\u629b\u51fa\uff0c\u5728webpack\u542f\u52a8\u5668\u91cc\u4f20\u5165webpack\u914d\u7f6e\u53c2\u6570\u6267\u884c\n};\n<\/code><\/pre>\nwebpack.js<\/h3>\n
lib\/webpack.js<\/p>\n<\/li>\n<\/ol>\n