百度云截图：

目录：

• 第1章 【序章】关于这门课，你需要了解得都在这里3 节 | 5分钟

  前端工程化&AMp;ne;Webpack ，真正的前端工程化覆盖一个项目从创建到开发到发布的整个流程，既是目前大厂主流的项目提效方案，更是高薪面试 “必考项”！从本章开始，让我们一起跟随 SAM 老师，开启“前端工程化”得升级之旅吧！…

  收起列表

• 视频：1-1 工程化≠Webpack (04:06)

• 图文：1-2 【预备知识】优雅学习课程，需要的知识储备

• 图文：1-3 【增值服务】面试指导

• 第2章 企业工程化场景分析&AMp;工程化核心技术讲解12 节 | 129分钟

  前端工程化是如何一步步发展到今天的？它在现阶段开发中的起到了怎样关键的影响和作用？本章将借助前端工程化的发展历史，带大家重新认识前端工程化的应用场景、适用范围和其中的关键技术，如：CommonJS、Esmodule、npm、Webpack等…

  收起列表

• 视频：2-1 【起航】阶段概览 (04:59)

• 视频：2-2 前端工程化发展历史 (15:06)

• 视频：2-3 前端工程化的应用场景 (12:34)

• 视频：2-4 前端工程化关键技术之模块化详解（上） (13:15)

• 视频：2-5 前端工程化关键技术之模块化详解（中） (09:48)

• 视频：2-6 前端工程化关键技术之模块化详解（下） (06:31)

• 视频：2-7 前端工程化关键技术之CommonJS规范详解（上） (11:42)

• 视频：2-8 前端工程化关键技术之CommonJS规范详解（下） (16:44)

• 视频：2-9 前端工程化关键技术之Esmodule规范详解（上） (07:18)

• 视频：2-10 前端工程化关键技术之Esmodule规范详解（下） (14:07)

• 视频：2-11 前端工程化关键技术之npm+Webpack原理 (12:47)

• 视频：2-12 ZBestPC工程化改造需求分析 (04:01)

• 第3章 【初探】原生前端项目工程化改造9 节 | 76分钟

  公司老旧原生项目需要改造，如何优雅应用工程化得思维排雷? 从本章开始，将与大家一起完成“原生js项目的工程化架构升级”得任务，通过该项目实战，你将正式入门前端工程化，成为前端工程化开发领域的实践者！在全面掌握和实践工程化知识体系的同时，开发效率也将获得显著提升！工欲善其事必先利其器，让我们先来认识一下…

  收起列表

• 视频：3-1 Webpack核心概念入门 (04:34)

• 视频：3-2 Webpack快速入门+基础代码演示 (12:55)

• 视频：3-3 Webpack source-map原理讲解 (04:36)

• 视频：3-4 通过Webpack loADer打包css文件 (04:13)

• 视频：3-5 css-loADer打包文件源码解析（上） (10:23)

• 视频：3-6 css-loADer打包文件源码解析（下） (07:26)

• 视频：3-7 创建属于自己的文件类型：自定义loADer开发 (12:06)

• 视频：3-8 Webpack plugin入门+BannerPlugin源码解析 (12:43)

• 视频：3-9 自定义Webpack plugin实现自定义页脚注释 (06:26)

• 第4章 【原生js项目】项目源码分析+工程化改造流程分析4 节 | 17分钟

  知己知彼，才能百战百胜！本章将带你在认识项目源码的同时，梳理工程化改造的流程以及其中需要重点关注的问题，做好战情分析，更加从容的迎击！

  收起列表

• 视频：4-1 ZBestPC项目改造前源码分析 (07:00)

• 视频：4-2 ZBestPC项目工程化存在的问题分析 (04:10)

• 视频：4-3 工程化改造流程梳理和难点解析 (05:44)

• 图文：4-4 【储备】项目预备知识梳理

• 第5章 【前期准备】原生JS项目工程化架构改造5 节 | 39分钟

  本章将带你完成原生JS项目工程化改造的第一步：从搭建项目框架、将html、js、css原生代码移植到项目中，到进行相应的Webpack处理，以工程化的思维破圈。

  收起列表

• 视频：5-1 原生js项目集成Webpack (04:48)

• 视频：5-2 使用html-Webpack-plugin实现自动注入bundle (08:09)

• 视频：5-3 首页css移植+Webpack5图片打包新特性详解 (13:14)

• 视频：5-4 首页js移植+PROvidePlugin注入全局变量 (05:46)

• 视频：5-5 zbestpc项目登录页面移植 (06:17)

• 第6章 【性能优化】原生JS项目工程化性能优化9 节 | 65分钟

  本章将完成原生项目的进阶升级，将囊括各种工程化的高级技巧，包括：js/css文件分离、treeshaking原理和应用、splitChunk、ejs模板等等处理。理论和实践都不放过，干货满满，不容错过！

  收起列表

• 视频：6-1 项目优化进阶之多js分离 (05:29)

• 视频：6-2 项目开发模式配置+CopyWebpackPlugin自动拷贝配置 (09:31)

• 视频：6-3 性能优化之从bundle剥离css资源 (06:03)

• 视频：6-4 性能优化之js&AMp;css压缩+treeshaking特性详解 (11:48)

• 视频：6-5 精化：详细讲解treeshaking的使用前提和触发条件 (07:00)

• 视频：6-6 划重点：详细讲解splitChunkj特性 (16:10)

• 视频：6-7 利用ejs实现公共代码复用 (06:26)

• 视频：6-8 利用CleanWebpackPlugin清空dist目录 (02:18)

• 图文：6-9 【拓展】Webpack常用优化手段

• 第7章 【加餐】原生JS项目Vue进阶改造9 节 | 55分钟

  企业实际应用中，我们往往会应用MVVM框架进一步提升开发效率，本章我们将对原生项目使用Vue框架进行升级，还会同时实现Vue MPA、Vue SPA两种运行模式，彻底带大家搞懂如何将Webpack模块化升级到Vue框架。

  收起列表

• 视频：7-1 Webpack多配置文件改造 (05:49)

• 视频：7-2 完成Vue项目构建前的准备工作 (04:31)

• 视频：7-3 编写Vue项目构建配置文件 (10:14)

• 视频：7-4 首页和登录页面移植到Vue框架 (10:51)

• 视频：7-5 Vue MPA应用移植和工程问题解决 (09:40)

• 视频：7-6 Vue2升级Vue3原理讲解+构建脚本升级 (06:41)

• 视频：7-7 Vue2升级Vue3源码改造 (06:20)

• 作业：7-8 【阶段任务】项目进阶升级改造

• 图文：7-9 项目任务操作手册

• 第8章 【进击】大型项目工程化改造8 节 | 56分钟

  大型前端项目提出改造需求，什么样的工程化解决方案更实用？从本章开始，将与大家一起完成“Vue2-Vue3项目工程化架构升级”得任务，通过该项目实战，你将拥有更广阔的开发思路，在企业工程化架构升级中更快上手，成为前端工程化架构升级最优方案的提供者。在项目工程化改造准备环节，SAM老师将从升级需求和构建源码两个角度…

  收起列表

• 视频：8-1 vue2-elm架构升级需求分析 (05:05)

• 视频：8-2 vue2-elm项目启动+构建命令分析 (08:06)

• 视频：8-3 vue2-elm项目开发模式构建源码分析 (07:10)

• 视频：8-4 深入理解开发模式下时为什么要启动exPress服务 (04:52)

• 视频：8-5 http服务原理讲解+exPress服务快速搭建 (09:16)

• 视频：8-6 exPress核心概念middleware深入讲解 (07:04)

• 视频：8-7 exPress异常中间件和异常捕获机制详解 (06:10)

• 视频：8-8 exPress httPS服务+静态资源服务搭建实战 (07:19)

• 第9章 【HMR原理解析】vue-cli核心源码解析6 节 | 57分钟

  理论实践不分家。打好理论基础，才能更好实战开发。想要对vue2-elm进行完美的工程化架构升级，那你一定要知道这个核心中间件： devMiddleware。除了这个插件外，本章还会对其他Webpack插件进行详解，包括：HMR、vue-cli、hotMiddleware等。…

  收起列表

• 视频：9-1 核心中间件：Webpack-dev-middleware实例化源码解析 (09:33)

• 视频：9-2 devMiddleware中间件核心处理逻辑解析 (14:49)

• 视频：9-3 深入讲解HMR实现原理 (08:24)

• 视频：9-4 hotMiddleware源码执行流程详解 (10:56)

• 视频：9-5 HMR客户端实现原理详解 (10:05)

• 视频：9-6 vue-cli构建源码流程梳理 (03:10)

• 第10章 【Vue3框架升级】大型前端项目Vue2升级Vue3实战9 节 | 52分钟

  你知道如何对vue2项目进行vue3升级吗？你知道进行vue3升级时需要重点关注哪些内容吗？比你高薪的同事可能早已掌握了这些，快跟随课程行动起来吧！！本章内容将带你实现vue2项目的vue3项目升级，全面拥抱vue3。

  收起列表

• 视频：10-1 为什么要升级vue3——vue3与vue2对比 (07:36)

• 视频：10-2 vue3升级流程分析+vue3依赖升级 (03:56)

• 视频：10-3 vue2-elm项目启动脚本升级 (06:27)

• 视频：10-4 项目vue3升级后编译错误的解决 (05:35)

• 视频：10-5 vue-Router和vuex语法升级 (07:06)

• 视频：10-6 接口升级+图片链接升级 (04:51)

• 视频：10-7 首页vue3语法升级 (10:38)

• 视频：10-8 vuex和vue-Router移植要点解析 (03:47)

• 视频：10-9 vue3.2 setup语法糖升级 (01:38)

• 第11章 【Webpack性能优化】大型前端项目工程化升级实战9 节 | 75分钟

  大型前端项目工程庞大而复杂，因此，我们在对其进行性能优化的同时，更要深入理解其核心插件的实现原理，才能真正掌握如何应用Webpack更加从容优雅的进行性能优化。

  收起列表

• 视频：11-1 Webpack性能优化原理和目标 (03:35)

• 视频：11-2 深入分析构建速度测量插件speed-measure-Webpack-plugin (12:16)

• 视频：11-3 深入分析构建体积检测插件Webpack-bundle-analyzer (09:44)

• 视频：11-4 构建性能优化之多进程threAD-loADer (09:04)

• 视频：11-5 【精华】Webpack5分包策略详解 (10:23)

• 视频：11-6 分包文件拷贝和模板的自动引用 (09:28)

• 视频：11-7 利用Webpack5 cache特性大幅提升构建性能 (07:49)

• 视频：11-8 IMage-Webpack-loADer实现图片5倍压缩 (07:04)

• 视频：11-9 purgecss-Webpack-plugin优化css体积 (05:21)

• 第12章 【Webpack5】前端构建工具Webpack5升级指南8 节 | 87分钟

  完成了项目的性能优化后，我们还要紧跟时代脚步，对项目进行Webpack5的全面升级。包括升级原项目中Webpack4语法，升级Webpack-cli版本、module语法，还添加了css-Minimizer-Webpack-plugin插件。Webpack5升级是项目质变的关键要素之一

  收起列表

• 视频：12-1 Webpack4和5构建结果对比 (12:43)

• 视频：12-2 Webpack4和5缓存特性对比 (10:23)

• 视频：12-3 Webpack缓存插件hard-source-Webpack-plugin (04:40)

• 视频：12-4 Webpack4和5构建结果对比 (12:09)

• 视频：12-5 Webpack5高级特性：URIs解析 (12:42)

• 视频：12-6 Webpack5高级特性：TreeShaking和SideEffects (10:08)

• 视频：12-7 Webpack5高级特性：模块联邦 (17:03)

• 视频：12-8 Webpack5高级特性：PackageExports (06:18)

• 第13章 【通关】前端工程化脚手架设计16 节 | 121分钟

  大型前端团队技术栈庞杂、技术体系不一致，如何统一团队的工程体系、实现工程规范和标准对齐？从本章开始，将与大家一起完成“IMooc-build 工程化脚手架开发”的任务，通过该项目实战，你将能够独立完成对大型项目的前端工程化架构升级以及工程化脚手架的搭建，成为前端工程化架构升级的领导者。在正式启动之前，让我们先…

  收起列表

• 视频：13-1 为什么需要前端工程化脚手架？ (10:31)

• 视频：13-2 深入脚手架的实现原理 (10:55)

• 视频：13-3 脚手架开发流程介绍 (06:06)

• 视频：13-4 快速搭建脚手架和脚手架本地调试方法 (04:20)

• 视频：13-5 脚手架参数解析方法封装1 (07:35)

• 视频：13-6 IMooc-ls脚手架遍历文件功能实现 (07:03)

• 视频：13-7 IMooc-ls支持查询全部文件和列表渲染模式 (05:04)

• 视频：13-8 深入讲解MacOS（含linux）文件权限体系 (05:17)

• 视频：13-9 解析MacOS（含linux）文件类型和权限存储原理 (08:00)

• 视频：13-10 应用fs.Stat的mode属性获取文件类型 (06:57)

• 视频：13-11 使用与运算（&AMp;）获取文件权限 (09:00)

• 视频：13-12 应用id命令获取用户信息 (08:52)

• 视频：13-13 文件容量和创建时间的获取 (06:34)

• 视频：13-14 文件夹下级文件数量功能开发 (02:38)

• 视频：13-15 脚手架自动化测试流程讲解和脚本开发 (10:42)

• 视频：13-16 文件类型+权限自动化测试脚本开发 (10:28)

• 第14章 【脚手架框架】前端工程化脚手架框架搭建14 节 | 121分钟

  在明确了工程化脚手架的实际应用场景后，我们更清楚了脚手架需要实现的功能。接下来，让我们正式进入脚手架的开发搭建工作吧！

  收起列表

• 视频：14-1 为什么要使用脚手架框架？ (05:13)

• 视频：14-2 脚手架框架之框架搭建+参数解析1 (08:48)

• 视频：14-3 脚手架框架之subcommand解析 (07:23)

• 视频：14-4 commander框架帮助文档生成规则 (03:42)

• 视频：14-5 commander options基础特性解析 (13:04)

• 视频：14-6 commander options高级特性解析 (10:18)

• 视频：14-7 高能：利用Option对象创建脚手架属性 (16:10)

• 视频：14-8 自定义Option处理函数 (06:35)

• 视频：14-9 高级特性：Option参数叠加处理1 (07:34)

• 视频：14-10 Command基本用法解析 (08:14)

• 视频：14-11 Argument高级用法解析 (05:33)

• 视频：14-12 Commander action this用法+钩子函数 (06:55)

• 视频：14-13 脚手架框架搭建之Node版本校验 (15:57)

• 视频：14-14 脚手架框架搭建之命令注册 (05:12)

*声明：课程资源购自网络，版权归原作者所有，仅供参考学习使用，严禁外传及商用，若侵犯到您的权益请联系客服删除。