{"id":13671392,"url":"https://github.com/youngwind/fake-webpack","last_synced_at":"2025-04-14T20:31:12.176Z","repository":{"id":143665123,"uuid":"80807995","full_name":"youngwind/fake-webpack","owner":"youngwind","description":"模仿webpack写一个打包工具","archived":false,"fork":false,"pushed_at":"2017-03-04T01:10:22.000Z","size":22,"stargazers_count":109,"open_issues_count":2,"forks_count":24,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-28T09:01:42.935Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/youngwind.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-03T07:44:02.000Z","updated_at":"2024-07-08T08:33:49.000Z","dependencies_parsed_at":"2023-07-13T21:45:31.094Z","dependency_job_id":null,"html_url":"https://github.com/youngwind/fake-webpack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youngwind%2Ffake-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youngwind%2Ffake-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youngwind%2Ffake-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/youngwind%2Ffake-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/youngwind","download_url":"https://codeload.github.com/youngwind/fake-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248955485,"owners_count":21189128,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:08.382Z","updated_at":"2025-04-14T20:31:12.169Z","avatar_url":"https://github.com/youngwind.png","language":"JavaScript","readme":"# 简介\n通过学习 webpack 的源码,模仿如何写一个简单版的 webpack。相关的源码分析文章请参考[我的博客](https://github.com/youngwind/blog/labels/webpack%20%E6%BA%90%E7%A0%81)。\n如何启动及调试本项目,见最下面。\n\n# 实现功能\n- [x] 将所有模块打包到一个 JS 文件 (例子 example/simple)\n- [x] 代码切割,也就是 code-splitting (例子 example/code-splitting)\n- [x] loader机制(例子 example/loader, 内置了less-loader和style-loader,可以加载less文件)\n- [ ] 待定\n\n# 最简单的例子\n```js\n// example.js\n\nlet a = require('a');\nlet b = require('b');\nlet c = require('c');\na();\nb();\nc();\n```\n\n```js\n// 输出 output.js\n\n/******/(function(modules) {\n/******/\tvar installedModules = {};\n/******/\tfunction require(moduleId) {\n/******/\t\tif(installedModules[moduleId])\n/******/\t\t\treturn installedModules[moduleId].exports;\n/******/\t\tvar module = installedModules[moduleId] = {\n/******/\t\t\texports: {}\n/******/\t\t};\n/******/\t\tmodules[moduleId](module, module.exports, require);\n/******/\t\treturn module.exports;\n/******/\t}\n/******/\treturn require(0);\n/******/})\n/******/({\n/******/0: function(module, exports, require) {\n\nlet a = require(/* a */1);\nlet b = require(/* b */2);\nlet c = require(/* c */3);\na();\nb();\nc();\n\n\n/******/},\n/******/\n/******/1: function(module, exports, require) {\n\n// module a\n\nmodule.exports = function () {\n    console.log('a')\n};\n\n/******/},\n/******/\n/******/2: function(module, exports, require) {\n\n// module b\n\nmodule.exports = function () {\n    console.log('b')\n};\n\n/******/},\n/******/\n/******/3: function(module, exports, require) {\n\nmodule.exports = function () {\n    console.log('c')\n}\n\n/******/},\n/******/\n/******/})\n```\n# code-splitting\n```js\n// example.js\n\nvar a = require(\"a\");\nvar b = require(\"b\");\na();\nrequire.ensure([\"c\"], function(require) {\n    require(\"b\")();\n    var d = require(\"d\");\n    var c = require('c');\n    c();\n    d();\n});\n\nrequire.ensure(['e'], function (require) {\n   require('f')();\n});\n```\n\n```js\n// output.js\n\n/******/(function(document, undefined) {\n/******/\treturn function(modules) {\n/******/\t\tvar installedModules = {}, installedChunks = {0:1};\n/******/\t\tfunction require(moduleId) {\n/******/\t\t\tif(typeof moduleId !== \"number\") throw new Error(\"Cannot find module '\"+moduleId+\"'\");\n/******/\t\t\tif(installedModules[moduleId])\n/******/\t\t\t\treturn installedModules[moduleId].exports;\n/******/\t\t\tvar module = installedModules[moduleId] = {\n/******/\t\t\t\texports: {}\n/******/\t\t\t};\n/******/\t\t\tmodules[moduleId](module, module.exports, require);\n/******/\t\t\treturn module.exports;\n/******/\t\t}\n/******/\t\trequire.ensure = function(chunkId, callback) {\n/******/\t\t\tif(installedChunks[chunkId] === 1) return callback(require);\n/******/\t\t\tif(installedChunks[chunkId] !== undefined)\n/******/\t\t\t\tinstalledChunks[chunkId].push(callback);\n/******/\t\t\telse {\n/******/\t\t\t\tinstalledChunks[chunkId] = [callback];\n/******/\t\t\t\tvar head = document.getElementsByTagName('head')[0];\n/******/\t\t\t\tvar script = document.createElement('script');\n/******/\t\t\t\tscript.type = 'text/javascript';\n/******/\t\t\t\tscript.src = chunkId+modules.a;\n/******/\t\t\t\thead.appendChild(script);\n/******/\t\t\t}\n/******/\t\t};\n/******/\t\twindow[modules.b] = function(chunkId, moreModules) {\n/******/\t\t\tfor(var moduleId in moreModules)\n/******/\t\t\t\tmodules[moduleId] = moreModules[moduleId];\n/******/\t\t\tvar callbacks = installedChunks[chunkId];\n/******/\t\t\tinstalledChunks[chunkId] = 1;\n/******/\t\t\tfor(var i = 0; i \u003c callbacks.length; i++)\n/******/\t\t\t\tcallbacks[i](require);\n/******/\t\t};\n/******/\t\treturn require(0);\n/******/\t};\n/******/})(document)\n/******/({a:\".output.js\",b:\"webpackJsonp\",\n/******/0: function(module, exports, require) {\n\nvar a = require(/* a */1);\nvar b = require(/* b */2);\na();\nrequire.ensure(1, function(require) {\n    require(/* b */2)();\n    var d = require(/* d */4);\n    var c = require(/* c */3);\n    c();\n    d();\n});\n\nrequire.ensure(2, function (require) {\n   require(/* f */6)();\n});\n\n/******/},\n/******/\n/******/1: function(module, exports, require) {\n\n// module a\n\nmodule.exports = function () {\n    console.log('a')\n};\n\n/******/},\n/******/\n/******/2: function(module, exports, require) {\n\n// module b\n\nmodule.exports = function () {\n    console.log('b');\n}\n\n/******/},\n/******/\n/******/})\n```\n\n```js\n// 1.output.js\n\n/*****/webpackJsonp(1, {\n/******/3: function(module, exports, require) {\n\n// module c\nconsole.log('执行模块c');\nmodule.exports = function () {\n    console.log('c');\n}\n\n/******/},\n/******/\n/******/4: function(module, exports, require) {\n\n// module d\n\nmodule.exports = function () {\n    console.log('d');\n};\n\n/******/},\n/******/\n/******/})\n```\n\n```js\n// 2.output.js\n\n/*****/webpackJsonp(2, {\n/******/5: function(module, exports, require) {\n\n// module e\n\nconsole.log('执行e');\nmodule.exports = function () {\n    console.log('e');\n}\n\n/******/},\n/******/\n/******/6: function(module, exports, require) {\n\n// module f\n\nmodule.exports = function () {\n    console.log('f');\n}\n\n/******/},\n/******/\n/******/})\n```\n\n# loader 机制\n```js\n// example.js\n\nrequire('./style.less');\n```\n\n```less\n// style.less\n\n@color: #000fff;\n\n.content {\n    width: 50px;\n    height: 50px;\n    background-color: @color;\n}\n```\n\n```js\n// output.js\n/******/(function(modules) {\n/******/\tvar installedModules = {};\n/******/\tfunction require(moduleId) {\n/******/\t\tif(installedModules[moduleId])\n/******/\t\t\treturn installedModules[moduleId].exports;\n/******/\t\tvar module = installedModules[moduleId] = {\n/******/\t\t\texports: {}\n/******/\t\t};\n/******/\t\tmodules[moduleId](module, module.exports, require);\n/******/\t\treturn module.exports;\n/******/\t}\n/******/\treturn require(0);\n/******/})\n/******/({\n/******/0: function(module, exports, require) {\n\nrequire(/* ./style.less */1);\n\n\n/******/},\n/******/\n/******/1: function(module, exports, require) {\n\nrequire(/* /Users/youngwind/www/fake-webpack/node_modules/style-loader-fake/addStyle */2)(require(/* !/Users/youngwind/www/fake-webpack/node_modules/less-loader-fake/index.js!/Users/youngwind/www/fake-webpack/examples/loader/style.less */3))\n\n/******/},\n/******/\n/******/2: function(module, exports, require) {\n\n/**\n * @author  youngwind\n */\n\nmodule.exports = function (cssCode) {\n    let styleElement = document.createElement(\"style\");\n    styleElement.type = \"text/css\";\n    if (styleElement.styleSheet) {\n        styleElement.styleSheet.cssText = cssCode;\n    } else {\n        styleElement.appendChild(document.createTextNode(cssCode));\n    }\n    document.getElementsByTagName(\"head\")[0].appendChild(styleElement);\n};\n\n/******/},\n/******/\n/******/3: function(module, exports, require) {\n\nmodule.exports = \".content {\\n  width: 50px;\\n  height: 50px;\\n  background-color: #000fff;\\n}\\n\"\n\n/******/},\n/******/\n/******/})\n```\n\n# 如何运行本项目\n```\ngit clone https://github.com/youngwind/fake-webpack.git\ncd fake-webpack\nnpm link // 将 fake-webpack 命令注册到全局\n```\n这时候你就可以在任意一个文件夹调用 `fake-webpack` 命令, 下面是运行 example 的步骤\n\n1. 分别 cd 进去 examples 的各个子文件夹。\n2. 执行 `fake-webpack ./example.js`,可以看到对应生成的 output.js 文件\n3. 用浏览器打开 index.html, 便可以观察到 output.js 的运行结果。\n\n如果需要调试的话,请自行搜索\" WebStorm 调试命令行\"。","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoungwind%2Ffake-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoungwind%2Ffake-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoungwind%2Ffake-webpack/lists"}