{"id":31835017,"url":"https://github.com/inblossoms/webpack_tiny","last_synced_at":"2026-04-15T13:32:18.700Z","repository":{"id":136603064,"uuid":"494002138","full_name":"inblossoms/webpack_tiny","owner":"inblossoms","description":"🛠️  webpack minimal replication","archived":false,"fork":false,"pushed_at":"2022-05-20T15:28:42.000Z","size":33,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-12T00:52:58.585Z","etag":null,"topics":["babel","loader","webpack","webpack-loader","webpack4"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/inblossoms.png","metadata":{"files":{"readme":"README.md","changelog":"ChangeOutputPath.js","contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-05-19T09:19:51.000Z","updated_at":"2022-10-07T01:41:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"e4db2c4e-6f9e-4e3e-9372-cf0cfefb18e5","html_url":"https://github.com/inblossoms/webpack_tiny","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/inblossoms/webpack_tiny","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inblossoms%2Fwebpack_tiny","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inblossoms%2Fwebpack_tiny/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inblossoms%2Fwebpack_tiny/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inblossoms%2Fwebpack_tiny/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inblossoms","download_url":"https://codeload.github.com/inblossoms/webpack_tiny/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inblossoms%2Fwebpack_tiny/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31842866,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T13:28:40.153Z","status":"ssl_error","status_checked_at":"2026-04-15T13:28:29.396Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["babel","loader","webpack","webpack-loader","webpack4"],"created_at":"2025-10-12T00:50:32.546Z","updated_at":"2026-04-15T13:32:18.694Z","avatar_url":"https://github.com/inblossoms.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# miniWebPack\n\n理解 webpack 核心思想\n\n\u003e WebPack 实现梳理：\n\n- 如何读取文件的内容？\n- 如何获取依赖关系？\n  - 通过 @babel/parser 将读取到的文件内容解析为 AST。\n  - 通过 @babel/traverse 解析 AST ，获取文件依赖\n- 如何将 esm 转换成 cjs 的模块导入方式？\n  - 因为 esm 文件导入 需要被放置在文件顶部，所以会有引入文件无法识别\n  - 通过 babel/core 把 esm 转为 cjs.（案例实现时配置了 bundle.ejs 文件模板，从而生成组合后的 js 文件）\n\n\u003e loader 实现梳理：\n\n- webpack 本身只能理解 js 代码，loader 就是让所有类型文件转换为 webpack 可以处理的有效模块（转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块）。\n- 怎样实现 loader 机制？\n  - 通过 babel 使得类型文件和 js 文件之间的一个转换 (案例中是 JSON - JS)\n\n\u003e plugin 实现梳理：\n\n- 背景：webpack 在不同的阶段会发出不同的事件，通过插件编写者对事件进行监听得到插件为我们暴露出来的数据（对象），通过操作对象上的方法来改变我们打包的行为。\n- 怎样实现 一个插件？\n  - 底层运用了 webpack 的 tapable。（案例中实现了一个 修改目标文件的打包路径）\n\n\u003e **构建策略**\n\u003e\n\u003e ![构建策略](https://img01.sogoucdn.com/net/a/04/link?appid=100520145\u0026url=http%3A%2F%2Fimg04.sogoucdn.com%2Fapp%2Fa%2F100520146%2F81227b5e6526764fafc71aa3d4dd4392)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finblossoms%2Fwebpack_tiny","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finblossoms%2Fwebpack_tiny","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finblossoms%2Fwebpack_tiny/lists"}