收藏

Webpack5 入门与实战,前端开发必备技能

融合技能+项目+思想,掌握 Webpack 的同时深化工程化思维

Webpack5 入门与实战,前端开发必备技能

¥299.00
难度 入门 时长 15小时 学习人数 164 综合评分 10.00
  • 第1章 课程简介 试看 1 节 | 12分钟

    课程的简单介绍~~

    收起列表

    • 视频: 1-1 导学 (11:15) 试看
  • 第2章 走进前端构建 5 节 | 38分钟

    通过本章了解前端的工程化历史,并且简单熟悉下当前业界应用最广泛的 webpack。

    收起列表

    • 视频: 2-1 为什么学习这门课程 (04:35)
    • 视频: 2-2 了解前端构建的重要性 (05:41)
    • 视频: 2-3 webpack的出现带来的变局 (04:31)
    • 视频: 2-4 前端构建初体验- webpack 及相关工具安装 (09:00)
    • 视频: 2-5 webpack初体验-构建一个最简单的前端项目 (13:40)
  • 第3章 学会webpack基础用法,一次搞懂webpack的构建流程 9 节 | 139分钟

    通过本章了解webpack的基本配置使用及注意事项,并且可以实现使用webpack构建一个简单前端项目,加深对各项配置实际作用的印象。

    收起列表

    • 视频: 3-1 webpack 配置介绍 (04:10)
    • 视频: 3-2 项目入口- entry (14:04)
    • 视频: 3-3 构建产物输出 - output (13:52)
    • 视频: 3-4 各类资源处理-loader-p (22:22)
    • 视频: 3-5 让 webpack 拥有更强大的功能-plugin (20:06)
    • 视频: 3-6 构建模式-mode (09:02)
    • 视频: 3-7 产物源码分析-sourcemap (17:07)
    • 视频: 3-8 开发环境模式-devserver (23:32)
    • 视频: 3-9 常见静态资源配置 (13:48)
  • 第4章 了解webpack打包原理,对构建的理解更上一层楼 8 节 | 195分钟

    通过本章可以掌握webpack的运行过程以及其中关键环节的原理,比如loader和plugin,并且可以学会开发一个自定义的loader和plugin。

    收起列表

    • 视频: 4-1 webpack 打包文件分析 (36:19)
    • 视频: 4-2 webpack 运行分析之启动流程 (27:39)
    • 视频: 4-3 webpack 运行分析之 tapable (35:33)
    • 视频: 4-4 webpack 运行分析之运行时-compiler (25:04)
    • 视频: 4-5 loader 的执行过程 (14:24)
    • 视频: 4-6 实操-如何实现一个 loader (17:18)
    • 视频: 4-7 plugin 的执行过程 (15:32)
    • 视频: 4-8 如何实现一个 plugin (22:45)
  • 第5章 全方位掌握 webpack 高阶用法 14 节 | 199分钟

    本章主要介绍一些webpack的高阶用法,可以掌握一些在日常开发中提升开发效率、提高项目性能以及优化开发体验等常规技巧。

    收起列表

    • 视频: 5-1 使用autoprefixer兼容各个浏览器样式属性 (10:32)
    • 视频: 5-2 实现移动端适配之rem及px自动转化rem (16:59)
    • 视频: 5-3 如何正确的做Code Spliting (16:01)
    • 视频: 5-4 公共静态资源处理 (11:30)
    • 视频: 5-5 将资源内联到html中 (19:34)
    • 视频: 5-6 如何实现多页面应用打包 (22:46)
    • 视频: 5-7 tree-shaking的原理和应用 (19:48)
    • 视频: 5-8 自动清理前一次构建产物 (05:16)
    • 视频: 5-9 通过 webpack 构建去除代码中的调试日志 (05:40)
    • 视频: 5-10 构建 SSR 应用-1 (12:47)
    • 视频: 5-11 构建 SSR 应用-2 (12:33)
    • 视频: 5-12 eslint 在 webpack 中如何配置 (10:07)
    • 视频: 5-13 了解 module federation (11:49)
    • 视频: 5-14 了解 module federation (23:21)
  • 第6章 掌握webpack构建效率和产物优化的必杀技 15 节 | 178分钟

    本章主要学习webpack的构建效率提升和构建产物优化,通过本章节可以掌握极致的构建速度优化方法,使得在开发大型项目中仍然可以快速启动、构建;并且可以学会最大限度优化构建产物的手段,将项目的性能提升一个台阶。

    收起列表

    • 视频: 6-1 优化准-对webpack构建速度做基本分析 (13:50)
    • 视频: 6-2 构建速度优化-利用计算机多核优化构建 (10:37)
    • 视频: 6-3 构建速度优化 -使用缓存提升二次构建速度 (21:40)
    • 视频: 6-4 构建速度优化-另一种缓存方式-MF (04:01)
    • 视频: 6-5 构建速度优化-使用外链提升构建速度 (06:55)
    • 视频: 6-6 构建速度优化-使用更高版本的webpack和node (05:10)
    • 视频: 6-7 构建速度优化-使用esbuild提升构建速度 (14:41)
    • 视频: 6-8 构建速度优化-借用swc提升webpack构建速度 (06:48)
    • 视频: 6-9 产物优化-构建产物体积分析 (11:12)
    • 视频: 6-10 构建产物优化-通过代码压缩减小构建产物 (10:26)
    • 视频: 6-11 构建产物优化-通过优化图片减少静态资源 (15:59)
    • 视频: 6-12 构建产物优化-通过清除无用代码减小构建产物 (13:24)
    • 视频: 6-13 产物优化-使用分包减少主bundle大小-1 (23:06)
    • 视频: 6-14 产物优化-使用分包减少主bundle大小-2 (10:44)
    • 视频: 6-15 构建产物优化-优化polyfill减少不必要的兼容代码 (08:55)
  • 第7章 react+webpack实战(react版本的新闻应用) 12 节 | 201分钟

    在本章节通过一个实际的项目开发过程,加深对webpack的使用,并且系统的掌握一些前端性能优化的方案。

    收起列表

    • 视频: 7-1 项目基础准备 (19:32)
    • 视频: 7-2 功能拆分和基础界面设置 (09:41)
    • 视频: 7-3 服务端功能设计 (09:24)
    • 视频: 7-4 实战开发-登录-1 (20:07)
    • 视频: 7-5 实战开发-登录-2 (20:05)
    • 视频: 7-6 实战开发-登录-3 (17:31)
    • 视频: 7-7 实战开发-新闻列表-1 (15:01)
    • 视频: 7-8 实战开发-新闻列表-2 (19:01)
    • 视频: 7-9 实战开发-详情页 (16:04)
    • 视频: 7-10 实战开发-详情页 (16:28)
    • 视频: 7-11 浅谈前端性能优化 (16:32)
    • 视频: 7-12 使用pwa优化当前应用 (20:56)
  • 第8章 vue+webpack实战(vue版本的新闻应用) 3 节 | 49分钟

    本章节与前面章节大致相同,兼顾 vue 技术展。

    收起列表

    • 视频: 8-1 项目基础准备-1 (13:07)
    • 视频: 8-2 项目基础准备-2 (11:19)
    • 视频: 8-3 功能拆分和页面设计 (24:28)
  • 第9章 工程化能力 4 节 | 66分钟

    通过本章节可以站在工程化的角度,加强对webpack构建的理解,并且可以为团队建设更加通用、完善的工程化方案。

    收起列表

    • 视频: 9-1 如何开发发布一个npm包 (16:43)
    • 视频: 9-2 编写可扩展的 webpack 配置 (11:45)
    • 视频: 9-3 编写可扩展的 webpack 配置 (13:11)
    • 视频: 9-4 实现一个简单的脚手架 (23:34)
  • 第10章 444 内容更新中

    444

本课程已完结

试看

全部试看小节



讲师

stevenzzw Web前端工程师

大厂经历,6年 前端经验,熟练使用webpack、react、vue等,多年工程化经验,曾负责团队工程化建设,并且多年的项目经验积累,实战经验较为丰富,同时也有多年的面试官经历。

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题