{"id":13701326,"url":"https://github.com/dongyuanxin/webpack-demos","last_synced_at":"2025-05-04T21:30:44.109Z","repository":{"id":128790388,"uuid":"140183913","full_name":"dongyuanxin/webpack-demos","owner":"dongyuanxin","description":"📦 Demos \u0026\u0026 Courses for Webpack 4","archived":true,"fork":false,"pushed_at":"2022-08-23T03:22:23.000Z","size":200,"stargazers_count":627,"open_issues_count":0,"forks_count":138,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-11-13T07:35:47.143Z","etag":null,"topics":["css","html","javascript","node","webpack","webpack4"],"latest_commit_sha":null,"homepage":"https://github.com/dongyuanxin/blog","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/dongyuanxin.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}},"created_at":"2018-07-08T16:22:24.000Z","updated_at":"2024-08-21T09:34:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"9b9f46fe-c8d5-4211-a38d-67483ce0a94d","html_url":"https://github.com/dongyuanxin/webpack-demos","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/dongyuanxin%2Fwebpack-demos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dongyuanxin%2Fwebpack-demos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dongyuanxin%2Fwebpack-demos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dongyuanxin%2Fwebpack-demos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dongyuanxin","download_url":"https://codeload.github.com/dongyuanxin/webpack-demos/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252403687,"owners_count":21742412,"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":["css","html","javascript","node","webpack","webpack4"],"created_at":"2024-08-02T20:01:29.651Z","updated_at":"2025-05-04T21:30:43.585Z","avatar_url":"https://github.com/dongyuanxin.png","language":"JavaScript","funding_links":[],"categories":["JavaScript (485)","JavaScript"],"sub_categories":[],"readme":"# [webpack-demos：全网最贴心 webpack 系列教程和配套代码](https://0x98k.com/2018-07-29-webpack-demos-introduction)\n\n\u003e Wow！全网最贴心的`webpack4`系列中文教程和配套代码 👇\n\n## 放在开头\n\n由于完全是博主利用业余时间编写和整理的，所以有些地方难免有失偏颇，还请多多海涵。如果您发现错误，欢迎致信 2181111110@qq.com 或 yuanxin.me@gmail.com ，我一定会在第一时间检查和修复！！！\n\n**如果本教程和示例代码对您的工作、学习或者爬坑有帮助，请动动您的小手，给个 Star，让更多的朋友了解并且参与进来，蟹蟹 ٩\\('ω'\\)و**\n\n**最后，欢迎转载和引用，但请指明出处（github 仓库或者博客文章地址均可）。这套教程和代码确实花费了博主很多精力和时间！**\n\n## 项目背景\n\n上半年在做 web 项目的时候，在`webpack`上踩了很多坑。由于使用的是 webpack4，所以网上现成的教程并不多，而且大多数不成体系。还有很多教程，把很多知识点杂糅在一起进行讲解，对于新手来说真的很不友好。\n\n所以我花费了 3 个多月整理了这份教程，一共分成 16 节，每节都有讲解，并且准备了配套代码。*应该说很贴心了吧哈哈哈。*当然，自己回查也很方便！\n\n本来想着做成掘金小册，或者录个视频赚赚钱。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。\n\n## 项目地址\n\n- GitHub 地址(代码): [webpack-demos](https://github.com/dongyuanxin/webpack-demos)\n- 讲解地址(课程): [webpack4 系列教程](./docs/)\n\n## 课程目录\n\n\n1.  [demo01](./docs/01.一：打包JS): 打包`JS`\n2.  [demo02](./docs/02.二：编译ES6): 编译`ES6`\n3.  [demo03](./docs/03.三：多页面解决方案--提取公共代码): 多页面解决方案--提取公共代码\n4.  [demo04](./docs/04.四：单页面解决方案--代码分割和懒加载): 单页面解决方案--代码分割和懒加载\n5.  [demo05](./docs/05.五：处理CSS): 处理`CSS`\n6.  [demo06](./docs/06.六：处理SCSS): 处理`Scss`\n7.  [demo07](./docs/07.七：SCSS提取和懒加载): 提取`Scss` (`CSS`等等)\n8.  [demo08](./docs/08.八：JS-Tree-Shaking): JS Tree Shaking\n9.  [demo09](./docs/09.九：CSS-Tree-Shaking): CSS Tree Shaking\n10. [demo10](./docs/10.十：图片处理汇总): 图片处理--识别, 压缩, `Base64`编码, 合成雪碧图\n11. [demo11](./docs/11.十一：字体文件处理): 字体文件处理\n12. [demo12](./docs/12.十二：处理第三方JavaScript库): 处理第三方`JS`库\n13. [demo13](./docs/13.十三：自动生成HTML文件): 生成`Html`文件\n14. [demo14](./docs/14.十四：Clean-Plugin-and-Watch-Mode): `Watch` Mode \u0026\u0026 Clean Plugin\n15. [demo15](./docs/15.十五：开发模式与webpack-dev-server): 开发模式--`webpack-dev-server`\n16. [demo16](./docs/16.十六：开发模式和生产模式·实战): 生产模式和开发模式分离\n\n## [代码目录](https://github.com/dongyuanxin/webpack-demos)\n\n1.  [demo01](./demo01): 打包`JS`\n2.  [demo02](./demo02): 编译`ES6`\n3.  [demo03](./demo03): 多页面解决方案--提取公共代码\n4.  [demo04](./demo04): 单页面解决方案--代码分割和懒加载\n5.  [demo05](./demo05): 处理`CSS`\n6.  [demo06](./demo06): 处理`Scss`\n7.  [demo07](./demo07): 提取`Scss` (`CSS`等等)\n8.  [demo08](./demo08): JS Tree Shaking\n9.  [demo09](./demo09): CSS Tree Shaking\n10. [demo10](./demo10): 图片处理--识别, 压缩, `Base64`编码, 合成雪碧图\n11. [demo11](./demo11): 字体文件处理\n12. [demo12](./demo12): 处理第三方`JS`库\n13. [demo13](./demo13): 生成`Html`文件\n14. [demo14](./demo14): `Watch` Mode \u0026\u0026 Clean Plugin\n15. [demo15](./demo15): 开发模式--`webpack-dev-server`\n16. [demo16](./demo16): ⭐ 生产模式和开发模式分离 ⭐\n\n## 关于作者\n\n- GitHub: [https://github.com/dongyuanxin](https://github.com/dongyuanxin)\n- 我的技术博客: [godbmw.com](https://godbmw.com/)\n- Email：2181111110@qq.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdongyuanxin%2Fwebpack-demos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdongyuanxin%2Fwebpack-demos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdongyuanxin%2Fwebpack-demos/lists"}