{"id":18,"date":"2021-12-20T04:14:46","date_gmt":"2021-12-20T04:14:46","guid":{"rendered":"http:\/\/114.132.224.28\/?p=18"},"modified":"2021-12-20T04:14:46","modified_gmt":"2021-12-20T04:14:46","slug":"mini-pack","status":"publish","type":"post","link":"http:\/\/localhost\/2021\/12\/20\/mini-pack\/","title":{"rendered":"Mini-pack"},"content":{"rendered":"\n
\u4e0erollup\u4e0d\u540c\uff0cwebpack\u4e3b\u8981\u901a\u8fc7\u8f6c\u79fb\u6210commonjs\u7684iife\u5f62\u5f0f\u751f\u6210bundle\u4ee3\u7801\u3002<\/p>\n\n\n\n
{\n id: 0,\n code: '',\n path: '',\n deps: []\n}<\/code><\/pre>\n\n\n\n2. \u7ee7\u7eed\u904d\u5386deps\uff0c\u7ee7\u7eed\u751f\u6210assert\uff0c\u751f\u6210\u4e00\u4e2a\u4f9d\u8d56\u56fe<\/p>\n\n\n\n
const absolutePath = path.dirname(assets.path)\nconst child = createAssets(path.join(absolutePath, relativePath))\nassert.mapping:{\n [relativePath]: child .id\n}<\/code><\/pre>\n\n\n\n3. \u751f\u6210bundle\u4ee3\u7801<\/p>\n\n\n\n
let module;\nmodule += {${module.id}: [\n function(require, module, exports) {\n ${mod.code}\n },\n ${JSON.stringify(mod.mapping)}\n ]},\nconst result <\/code>= `(function(graph){\n function require(id) {\n const [fn, mapping] = graph[id]\n let module = {\n exports: {}\n }\n function localRequired(relativePath){\n return require(mapping[relativePath])\n }\n fn(localRequired, module, module.exports)\n return module.exports\n }\n require(0)\n})(graph)`<\/code><\/pre>\n\n\n\nreference\uff1a<\/p>\n\n\n\n
https:\/\/www.youtube.com\/watch?v=UNMkLHzofQI<\/a><\/p>\n\n\n\n\u624b\u52a8\u5c06\u4ee3\u7801\u6539\u53d8\uff0c\u6f14\u793a\u7684\u662f\u52a0\u8f7d\u8fc7\u7a0b\u548c\u600e\u4e48\u6574\u5408\u4ee3\u7801\uff0c\u5e76\u6f14\u793a\u4e86\u52a8\u6001\u8f7d\u5165<\/p>\n\n\n\n