你将获得

1. 快速掌握基础技能和进阶用法；

2. 熟悉打包速度和体积优化策略；

3. 深入源代码了解打包构建原理；

4. 编写健壮易维护的 webpack 配置。

课程介绍

近几年来，前端领域飞速发展，工作早已不再是切几张图，写几个页面那么简单，而是需要前端开发者更加专注业务需求。webpack，就是这么一款工具，将前端不断出现的新模块、新资源、新需求，进行自动化整合、梳理、输出，极大提高了我们的工作效率。

同时，webpack 凭借着自身社区生态丰富，配置灵活和插件化扩展，官方更新迭代速度快等优点，已成为前端构建领域里最炙手可热的构建工具。在 GitHub 上，webpack 也拥有着 48.8k 的 star。

可是，不少前端人，对于 webpack 的使用和了解只停留在了 20% 的基础功能上。每天开发写 npm run dev，该上线了按 npm run build，执行个命令，webpack 就帮你打包好了。

很多人根本不知道，这整个过程究竟发生了什么，导致之后出现问题，也无法对症下药，无从下手。以下这些情景，你肯定或多或少都遇到过：

1. 拿到一份用 vue-cli 和 create-react-app 生成的 webpack 配置，却不知道它们的含义；

2. 想要深入了解 webpack 内部原理，但发现看不懂 webpack 源码，也不知该从何下手；

3. 在做项目构建时，遇到速度或体积的问题时，发现自己拿不出一套完善的优化思路；

4. 在社区的插件和 loader 不满足实际项目时，却无法自定义出一个定制化的插件和 loader，来解决眼下的问题。

其实，掌握 webpack 是具有一定的学习曲线和成本的。如何理解 webpack “一切皆为模块”的打包理念？如何快速掌握 webpack 的构建配置？如何让 webpack 成为升职加薪利器，而不是成为一名“ webpack 配置工程师”？

整个课程基于最新版 webpack 4 设计，遵循由浅入深的原则，将内容分为 4 个阶段。

• 基础篇：从最基础的知识讲起，由浅入深，教你掌握 webpack 的核心概念和开发必备技巧。

• 进阶篇：带你编写 webpack 构建配置的同时，轻松掌握构建速度和体积的优化策略。

• 原理篇：抽丝剥茧，通过 webpack 源码，让你了解 webpack 内部的运行原理的同时，也具备编写自定义 loader 和插件的能力。

• 实战篇：从一个 Web 商城项目出发，讲解 webpack 如何运用到实际的项目中，并且最大化地提升开发阶段和发布阶段的构建体验。

无论你是对 webpack 一无所知的初学者，还是经验丰富的前端工程师，都能够通过这个课程，提升对 webpack 的理解，建立属于你自己的 webpack 知识体系，并在工作中能够高效的使用 webpack，完成各类前端项目的打包构建工作。

课程目录

课程目录

├── 01丨课程介绍.mp4 136.55M

├── 02丨内容综述.mp4 30.04M

├── 03丨为什么需要构建工具.mp4 37.15M

├── 04丨前端构建演变之路.mp4 39.15M

├── 05丨为什么选择webpack.mp4 37.09M

├── 06丨初识webpack.mp4 41.18M

├── 07丨环境搭建：安装webpack.mp4 65.61M

├── 08丨webpack初体验：一个最简单的例子.mp4 89.89M

├── 09丨通过npm script运行webpack.mp4 58.60M

├── 10丨webpack核心概念之entry用法.mp4 39.30M

├── 11丨webpack核心概念之output.mp4 54.51M

├── 12丨webpack核心概念之loaders.mp4 49.96M

├── 13丨webpack核心概念之plugins.mp4 35.05M

├── 14丨webpack核心概念之mode.mp4 56.02M

├── 15丨解析ES6和React JSX.mp4 118.51M

├── 16丨解析CSS、Less和Sass.mp4 101.93M

├── 17丨解析图片和字体.mp4 154.79M

├── 18丨webpack中的文件监听.mp4 71.01M

├── 19丨webpack中的热更新及原理分析.mp4 143.08M

├── 20丨文件指纹策略：chunkhash、contenthash和hash.mp4 213.95M

├── 21丨HTML 、CSS和JS代码压缩.mp4 192.98M

├── 22丨自动清理构建目录产物.mp4 81.46M

├── 23丨PostCSS插件autoprefixer自动补齐CSS3前缀.mp4 163.66M

├── 24丨移动端CSS px自动转换成rem.mp4 180.76M

├── 25丨静态资源内联.mp4 151.56M

├── 26丨多页面应用打包通用方案.mp4 320.90M

├── 27丨使用sourcemap.mp4 211.40M

├── 28丨提取页面公共资源.mp4 395.05M

├── 29丨treeshaking的使用和原理分析.mp4 216.33M

├── 30丨ScopeHoisting使用和原理分析.mp4 353.34M

├── 31丨代码分割和动态import.mp4 234.68M

├── 32丨webpack和ESLint结合.mp4 382.57M

├── 33丨webpack打包组件和基础库.mp4 402.55M

├── 34丨webpack实现SSR打包(上).mp4 447.17M

├── 35丨webpack实现SSR打包(下).mp4 253.39M

├── 36丨优化构建时命令行的显示日志.mp4 243.12M

├── 37丨构建异常和中断处理.mp4 92.92M

├── 38丨构建配置包设计.mp4 117.41M

├── 39丨功能模块设计和目录结构.mp4 288.69M

├── 40丨使用ESLint规范构建脚本.mp4 206.20M

├── 41丨冒烟测试介绍和实际运用.mp4 315.10M

├── 42丨单元测试和测试覆盖率.mp4 214.35M

├── 43丨持续集成和TravisCI.mp4 282.46M

├── 44丨发布到npm.mp4 122.28M

├── 45丨Git丨Commi规范和changelog生成.mp4 121.38M

├── 46丨语义化版本(Semantic丨Versioning)规范格式.mp4 105.28M

├── 47丨初级分析：使用webpack内置的stats.mp4 111.00M

├── 48丨速度分析：使用speed-measure-webpack-plugin.mp4 139.26M

├── 49丨体积分析：使用webpack-bundle-analyzer.mp4 186.72M

├── 50丨使用高版本的webpack和Node.mp4 187.58M

├── 51丨多进程多实例构建.mp4 294.28M

├── 52丨多进程多实例并行压缩.mp4 176.75M

├── 53丨进一步分包：预编译资源模块.mp4 357.57M

├── 54丨充分利用缓存提升二次构建速度.mp4 333.74M

├── 55丨缩小构建目标.mp4 173.33M

├── 56丨使用webpack进行图片压缩.mp4 155.79M

├── 57丨使用TreeShaking擦除无用的CSS.mp4 175.68M

├── 58丨使用动态Polyfill服务.mp4 175.52M

├── 59丨webpack启动过程分析.mp4 267.07M

├── 60丨webpack-cli源码阅读.mp4 615.58M

├── 61丨Tapable插件架构与Hooks设计.mp4 333.44M

├── 62丨Tapable是如何和Webpack进行关联起来的?.mp4 249.38M

├── 63丨webpack流程篇：准备阶段.mp4 463.49M

├── 64丨webpack流程篇：模块构建和chunk生成阶段.mp4 271.79M

├── 65丨webpack流程篇：文件生成.mp4 127.03M

├── 66丨动手编写一个简易的webpack(上).mp4 103.60M

├── 67丨动手编写一个简易的webpack(下).mp4 460.98M

├── 68丨loader的链式调用与执行顺序.mp4 102.10M

├── 69丨使用loader-runner高效进行loader的调试.mp4 154.82M

├── 70丨更复杂的loader的开发场.avi 535.64M

├── 71丨实战开发一个自动合成雪碧图的loader.mp4 193.34M

├── 72丨插件基本结构介绍.mp4 113.80M

├── 73丨更复杂的插件开发场景.mp4 131.29M

├── 74丨实战开发一个压缩构建资源为zip包的插件.avi 395.38M

├── 75丨商城技术栈选型和整体架构.mp4 74.55M

├── 76丨商城界面UI设计与模块拆分.mp4 84.85M

├── 77丨全家桶环境搭建.mp4 138.91M

├── 78丨数据库实体和表结构设计.mp4 167.53M

├── 79丨登录注册模块开发.mp4 136.71M

├── 80丨商品模块开发.mp4 426.83M

├── 81丨订单模块开发.mp4 351.54M

├── 82丨谈谈web商城的性能优化策略.mp4 121.85M

├── 83丨功能开发总结.mp4 54.51M

└── 84丨结束语.avi 43.17M