{"id":14976409,"url":"https://github.com/aasailan/learnwebpack","last_synced_at":"2025-10-27T20:31:10.250Z","repository":{"id":41771692,"uuid":"149094882","full_name":"aasailan/learnWebpack","owner":"aasailan","description":"阅读学习webpack源码","archived":false,"fork":false,"pushed_at":"2022-12-31T02:58:09.000Z","size":1160,"stargazers_count":5,"open_issues_count":12,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T08:03:30.252Z","etag":null,"topics":["learn","learnwebpack","source","study","study-webpack","webpack","webpack-source","webpack3"],"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/aasailan.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}},"created_at":"2018-09-17T08:42:14.000Z","updated_at":"2024-05-14T02:55:28.000Z","dependencies_parsed_at":"2023-01-31T17:46:45.887Z","dependency_job_id":null,"html_url":"https://github.com/aasailan/learnWebpack","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/aasailan%2FlearnWebpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aasailan%2FlearnWebpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aasailan%2FlearnWebpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aasailan%2FlearnWebpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aasailan","download_url":"https://codeload.github.com/aasailan/learnWebpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238553082,"owners_count":19491369,"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":["learn","learnwebpack","source","study","study-webpack","webpack","webpack-source","webpack3"],"created_at":"2024-09-24T13:53:50.760Z","updated_at":"2025-10-27T20:31:09.683Z","avatar_url":"https://github.com/aasailan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# learn webpack\r\n\r\n本项目用于阅读学习webpack源码，项目基于webpack3.10.0版本。wepack源码以及注释放在debug_node_modules文件夹下。利用webstorm debug build文件夹下面的webstorm-debugger.js文件，可以debug debug_node_modules文件夹下面的webpack源码。\r\n\r\n#### 由于当前webpack已经升级到webpack4，官方网站的文档已经切换到webpack4。webpack3的文档可在 https://webpack-v3.jsx.app/ 或者 https://github.com/webpack/webpack.js.org/blob/v3.11.0/src/content/index.md 中查看\r\n\r\n## 目录结构说明\r\n```\r\nproject\r\n|\r\n|-src // webpack编译测试源码\r\n|\r\n|-build // build config\r\n|   |- webpack.config.js // webpack config\r\n|   |- webstorm-debugger.js // 使用webstorm debug该文件，加载debug_node_modules内的webpack代码，进而调试webpack代码。\r\n|\r\n|-debug_node_modules // 存放被阅读和debug的node_modules源码\r\n    |- webpack // 被阅读和debug的webpack源码\r\n\r\n```\r\n\r\n## 安装阅读说明\r\n1、 git clone https://github.com/aasailan/learnWebpack.git   \r\n2、 npm install   \r\n3、 用webstorm打开项目，打开build/webstorm-debugger.js，右键，debug该文件。\r\n\r\nwebpack源码阅读注释写在debug_node_modules/webpack文件夹内。\r\n\r\n## webpack内的一些重要对象解析\r\n关于webpack内的一些重要对象解析可以查看[webpack重要对象](https://github.com/aasailan/learnWebpack/blob/master/webpack重要对象.md)\r\n\r\n## webpack运行流程说明\r\n关于webpack运行流程的说明可以查看[webpack构建流程](https://github.com/aasailan/learnWebpack/blob/master/webpack构建流程.md)\r\n\r\n## 一些细节\r\n### webpack/bin/webpack.js 文件\r\n主要作用如下：   \r\n  * 命令行中运行webpack，首先运行该文件\r\n  * 使用yargs库检查webpack config对象是否符合规范\r\n  * 合并webpack config对象(从webpack配置文件中导出的对象)和shell config，得出最终的webpack config对象\r\n  * require webpack函数，构建出compiler对象\r\n  * 调用compiler.run 方法，开始webpack编译过程\r\n\r\n### wepack/lib/webpack.js 文件\r\n主要作用如下：   \r\n  * 定义webpack函数，返回调用compiler对象，导出webpack函数\r\n  * 向webpack函数对象添加额外属性\r\n  * 使用exportPlugins函数向webpack函数对象添加一些内置插件构造函数。如webpack.optimize.UglifyJsPlugin插件等\r\n\r\n### 插件注册\r\n插件注册通常是插件实例在Tapable类或者其后代实例中（通常就是Compiler和Compilation实例）注册监听事件，然后等待webpack构建过程中触发监听事件，运行hook进行插件逻辑处理。大多数面向用户的插件，都是首先在 Compiler 上注册监听事件的。插件通常需要提供一个apply方法，用来传入 Compiler 实例注册监听事件，下面展示NodeEnvironmentPlugin插件的代码作为示例：\r\n```javascript\r\nclass NodeEnvironmentPlugin {\r\n  // 插件通常提供apply方法，用来传入compiler，在compiler实例上注册监听事件\r\n\tapply(compiler) {\r\n\t\tcompiler.inputFileSystem = new CachedInputFileSystem(new NodeJsInputFileSystem(), 60000);\r\n\t\tconst inputFileSystem = compiler.inputFileSystem;\r\n\t\tcompiler.outputFileSystem = new NodeOutputFileSystem();\r\n\t\tcompiler.watchFileSystem = new NodeWatchFileSystem(compiler.inputFileSystem);\r\n    // 使用compiler.plugin方法，注册 'before-run' 事件，并提供hook函数\r\n    compiler.plugin(\"before-run\", (compiler, callback) =\u003e {\r\n\t\t\tif(compiler.inputFileSystem === inputFileSystem)\r\n\t\t\t\tinputFileSystem.purge();\r\n\t\t\tcallback();\r\n\t\t});\r\n\t}\r\n}\r\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faasailan%2Flearnwebpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faasailan%2Flearnwebpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faasailan%2Flearnwebpack/lists"}