Webpack5 核心原理与应用实践- 掘金小册课程推荐/优惠

Webpack5 核心原理与应用实践--掘金小册课程推荐/优惠

由浅入深,从场景化工程搭建技巧;到构建与应用性能优化技巧;再到 Loader、Plugin 组件开发;最终落地到源码级剖析 Webpack 执行原理。
范文杰
30讲 | 5248人已学习
优惠价¥59.9
官网购买

版权声明

本站非掘金小册官网,与官方无任何关系。我们不提供课程下载或详细内容,仅作为课程分享和推荐平台。我们鼓励大家支持正版,尊重创作者的劳动成果,这样不仅能帮助创作者持续产出优质内容,也能让自己获得更好的学习体验。请通过官方渠道购买和学习课程,感谢您的理解与支持。

课程详情

课程介绍

作者介绍

我是范文杰,十年前端老人,目前就职于字节-朝夕光年-游戏平台前端团队,公众号「Tecvan」作者,重度 帝王蟹 爱好者,对前端工程化、性能、跨端开发、海鲜烹饪等有深入研究。

小册介绍

在现代 Web 应用开发中,Webpack 俨然已经成为几乎能满足所有构建需求的工程化基础设施之一,虽然近几年受 ViteRollup 等新型构建工具影响,热度有所降低,但它依然占据高达 89% 的使用率,依然被广泛应用于 Web、跨端、微前端、WASM、NPM 库等应用场景,是当下最值得学习的前端工程化工具之一!

但问题在于 Webpack 太复杂了!时至 5.0 版本,Webpack 功能集变得非常庞大,包括:模块打包、代码分割、按需加载、HMR、Tree-shaking、文件监听、Sourcemap、Module Federation、devServer等等,为了实现这些功能,Webpack 生态复杂度已经到了非常惊人的程度:

  • 接近 500 份JS文件,相应的有 400+ 种 Class;
  • 7.4 万行代码,2 万行注释;
  • 160+ 个内置插件,200+ 个hook;
  • 数千种社区组件。

这种体量下,光是学习如何搭配出满足场景构建需求的配置,就已经很是让人头秃,更别说掌握性能优化技巧、Loader/Plugin 组件开发、运行原理之类的“高级”课题了。

更大的问题在于,社区里很难找到真正让人满意的学习材料,要么内容版本太老旧,停留在 3.0 或更早时代;要么停留在“使用”的层面,没有更透彻讲解功能背后的实现原理。

以至于我个人遇到一些复杂问题的时候,都只能直接阅读源码。慢慢地,我也摸索出一些体系化、框架性的认知以及学习方法,发现这事没之前想象的那么难,于是决定出本小册,将我的学习经验分享给有需要的同学,希望可以帮大家少走弯路。

小册内容将围绕 Webpack 5.0 展开:

  • 基本用法:以更结构化方式介绍 Webpack 及常用组件的用法,并结合具体应用场景(如 WASM、NPM 库、微前端等),讲解各自特有的构建需求与相关实现;
  • 性能优化:讲解如何衡量 Webpack 构建性能,进而介绍各项常见的构建、产物性能优化手段,及其背后的实现原理;
  • 自定义组件:讲解 Webpack Loader、Plugin 的作用与基本形态,以及许多具体的开发技巧与辅助工具;
  • 核心原理:讲解 Webpack 5.0 的核心原理,包括:构建从启动到结束的运行过程、Chunk 分包规则及实现原理、Loader/Plugin 与 Webpack 核心架构、模块转译与打包原理、Tree-Shaking 原理,等等。

提示:虽然 Webpack 5.0 更新力度很大,但多数功能、实现原理均可套用到 Webpack 4.0 上,你大可不必担心内容普适性问题。

总之,我将从最基础的用法开始,逐步递进、深入挖掘 Webpack 最底层的实现,必定能帮助大家构建起更成熟、体系化的 Webpack 知识结构。

你会学到什么?

小册将为大家提供关于 Webpack 四个维度的知识:

  1. 怎么用:如何搭建适合特定场景的 Webpack 构建环境,包括:Web、SSR、WASM、NPM 等;
  2. 怎么用好:如何衡量、优化 Webpack 构建性能、产物运行性能;
  3. 怎么扩展:如何开发 Webpack Loader、Plugin,以及诸多开发工具、技巧介绍;
  4. 底层实现:Webpack 核心工作流,以及一些复杂构建技术的具体实现原理。

相信这些内容必定能帮助你体系化理解 Webpack 使用方法、实现原理及相关生态体系,深化工程化实践认知,进而构建属于自己的差异化竞争力。

即使你已经习惯通过诸如 Create React AppVue CLI 之类的脚手架工具间接使用 Webpack,你也能从小册中习得这些工具底层如何与 Webpack 协作;如何为脚手架项目添加定制能力;又或者,如何进一步优化配置,提升编译性能,等等。

适宜人群

小册内容较为复杂,有一些基础场景的用法介绍,但主要篇幅围绕 Webpack 原理、高级特性展开,因此有不低的理解门槛,更适合些具有较扎实的前端知识基础,但期望进一步补齐知识结构,全面、深入学习前端工程化体系的中高阶前端同学

名人推荐

课程目录

  • 重新认识 Webpack:旧时代的破局者
  • 如何借助预处理器、PostCSS 等构建现代 CSS 工程环境?
  • 如何搭建 Vue 全栈开发环境?
  • 如何理解 Webpack 配置底层结构逻辑?
  • 如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
  • 如何搭建 React 全栈开发环境?
  • 使用 Webpack 构建 NPM Library 的正确方式
  • 如何借助 Webpack 开发 PWA、Node、Electron 应用?
  • 使用 Webpack 构建微前端应用
  • 深入理解图像加载原理与最佳实践
  • 深入理解 Webpack 核心配置结构
  • 构建性能:分享 7 款常用的性能分析工具
  • 如何使用 Webpack 持久化缓存大幅提升构建性能?
  • Webpack 都有哪些实现并行构建的方法?
  • 不止 Terser:揭秘代码压缩的门门道道
  • 有哪些值得学习的构建性能极致优化技巧?
  • Loader 开发基础:从开源项目学到的 Loader 开发技巧
  • 如何正确使用 SplitChunks提升应用性能?
  • 还有哪些值得学习的应用性能极致优化技巧?
  • Loader 开发进阶:如何用好 Loader 扩展开发工具?
  • 插件开发基础:实例剖析插件基本形态与架构逻辑
  • 插件开发进阶:如何提升插件健壮性?
  • Dependency Graph:如何管理模块间依赖?
  • Tree-shaking:如何删除无用模块导出?
  • Init、Make、Seal:真正读懂 Webpack 核心流程
  • Chunk:三种产物的打包逻辑
  • Sourcemap:源码映射原理与应用技巧
  • Runtime:模块编译打包及运行时逻辑
  • HMR:如何动态替换页面代码?
  • 插件架构:Hook 体系是如何影响 Webpack 架构的?

作者介绍

公众号:tecvan

推荐

Python数据分析实战:构建股票量化交易系统 - 掘金小册课程推荐/分享/优惠/折扣
Python数据分析实战:构建股票量化交易系统
以股票数据为分析标的,以搭建量化交易策略为学习场景,由基础工具的使用逐步进阶到策略的设计,由浅入深、由技术到思维地为读者讲解Python金融数据分析和挖掘技术在股票量化交易中的应用。
元宵大师
2033人已学习
优惠价¥39.9
官网购买
Hello,分布式锁 - 掘金小册课程推荐/分享/优惠/折扣
Hello,分布式锁
授人以鱼不如授人以渔,本小册从0到1采取图文结合的方式带你彻底掌握分布式锁的设计思想以及核心源码。思想永远大于源码,本小册通过推导式先讲解思想,再带着思想深入到源码。
编程界的小學生
1864人已学习
优惠价¥29.9
官网购买
Uniapp 从入门到进阶 - 掘金小册课程推荐/分享/优惠/折扣
Uniapp 从入门到进阶
从基础到实战,详细讲解跨平台应用开发的方方面面,包含 Uniapp 开发常用知识点,基础 api,前端交互、组件封装,后端 Nodejs 开发、前后端联调和调优部署,是一套非常全面的综合课程。
阿面
2213人已学习
优惠价¥29.9
官网购买
前端依赖治理:代码分析工具开发实战 - 掘金小册课程推荐/分享/优惠/折扣
前端依赖治理:代码分析工具开发实战
掌握代码静态分析通用能力,深化工程化思维
前端iceman
2174人已学习
优惠价¥29.9
官网购买
SpringCloudNetflix 源码解读与原理分析 - 掘金小册课程推荐/分享/优惠/折扣
SpringCloudNetflix 源码解读与原理分析
继SpringBoot原理分析之后的又一力作,从熟悉的场景逐步深入源码底层,理解SpringCloudNetflix中组件的设计和原理。
LinkedBear
1443人已学习
优惠价¥59.9
官网购买
SkyWalking:应用监控和链路跟踪 - 掘金小册课程推荐/分享/优惠/折扣
SkyWalking:应用监控和链路跟踪
解决你的应用监控与跟踪难题
车辙cz
1124人已学习
优惠价¥29.9
官网购买