{"id":20714170,"url":"https://github.com/ksky521/webpack-tutorial","last_synced_at":"2026-03-02T22:46:14.555Z","repository":{"id":145299296,"uuid":"187309386","full_name":"ksky521/webpack-tutorial","owner":"ksky521","description":"《Webpack 从零入门到工程化实战》专栏源码","archived":false,"fork":false,"pushed_at":"2019-05-18T04:06:10.000Z","size":1474,"stargazers_count":68,"open_issues_count":1,"forks_count":15,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-08-23T04:29:56.167Z","etag":null,"topics":["webpack","webpack-demo","webpack-tutorial"],"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/ksky521.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,"zenodo":null}},"created_at":"2019-05-18T03:26:25.000Z","updated_at":"2025-08-13T16:00:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"c111c06f-9f51-4bf9-b730-500ce3670de7","html_url":"https://github.com/ksky521/webpack-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ksky521/webpack-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksky521%2Fwebpack-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksky521%2Fwebpack-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksky521%2Fwebpack-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksky521%2Fwebpack-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ksky521","download_url":"https://codeload.github.com/ksky521/webpack-tutorial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ksky521%2Fwebpack-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278712462,"owners_count":26032738,"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","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["webpack","webpack-demo","webpack-tutorial"],"created_at":"2024-11-17T02:30:04.761Z","updated_at":"2025-10-07T02:54:52.914Z","avatar_url":"https://github.com/ksky521.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 《Webpack 从零入门到工程化实战》专栏源码\n\n本代码是慕课专栏《[Webpack 从零入门到工程化实战](https://s.imooc.com/WFtUMW5)》的源码。\n\n## 专栏购买地址\n\n![](./poster.png)\n\n## 说明\n\n在[./packages](./packages)文件夹中，按照章节进行划分，进入对应章节的对应小节目录后，执行`npm install` 然后参考小节内容进行练习。\n\n\u003e 特别说明：\n\u003e\n\u003e 1. 有一些小节内容比较简单，不足够支撑一个练习项目，所以没有放进本项目中，可以按照小节操作内容，自己新建项目练手；\n\u003e 2. 如果用过[lerna](https://lernajs.io)和 [yarn](https://yarnpkg.com/) 的，可以使用`lerna bootstrap`开始项目。\n\n## **专栏模块**\n\n专栏共 38 讲，分为三大部分和六大模块。按照学习知识循序渐进和解决日常开发的环节来划分为三个大部分，分别为：Webpack 开发配置、Webpack 内核原理和工程化实践。\n\n-   Webpack 开发配置：我会从基础概念、日常开发、上线优化三大模块来讲解；\n-   Webpack 内核原理：学习 Webpack 的原理实现才能够让我们得心应手的使用它；\n-   工程化实践：这个部分我会结合自己项目的实践，介绍一些基于 Webpack 打造的前端工程化解决方案。\n\n下面是六大模块的详细课程介绍：\n\n**入门篇**\n\n介绍 Webpack 的基本概念和解决的问题，从零搭建 Webpack 构建环境，带领大家体验 Webpack-CLI 的零配置打包，介绍 Webpack 的核心概念和基础配置。\n\n**配置篇**\n\n从模块化开发、Babel、React/Vue 配置、TypeScript配置、CSS 样式相关配置和静态资源管理，到 Dev Server 环境配置，带领大家搭建基础开发环境。\n\n**优化篇**\n\n在优化篇，会针对生产环境的优化手段，从静态资源体积、缓存管理和 Webpack 打包速度优化进行深入讲解，并且对 Webpack 的代码拆分（SplitChunk）和 Tree-Shaking 代码级别的实践讲解。\n\n**原理篇**\n\n介绍 Webpack 的核心机制实现，学习 Webpack 的核心模块 Tapable 的实现和用法，更加深入的理解 Webpack 的工作流程，理解 Webpack 的 Compiler 和 Compilation 两个对象。\n\n**实战篇**\n\n学习完 Webpack 的基础知识和内核原理，和大家一起动手从工程化和项目实战角度，通过解决项目中的实际问题，来体验 Webpack 的强大功能。\n\n**总结篇**\n\n本章节内容偏总结和手册功能，只要内容包括课程总结、讲解 Webpack 5.0 的新技术和常用 Loader、Plugin 插件列表。\n\n## 你会学到什么？\n\n-   Webpack 概念及其 CLI 使用方法，了解 Webpack 和 NPM Scripts 配合打造工程化脚本方案；\n-   了解 Webpack 优化方案，使用 Webpack 打造强大打包工具；\n-   理解并且掌握 Webpack 内核原理实现，学习 Loader、Plugin 代码实现；\n-   从真实项目实战出发，运用 Webpack 原理知识构造自己的工程化解决方案。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fksky521%2Fwebpack-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fksky521%2Fwebpack-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fksky521%2Fwebpack-tutorial/lists"}