|
四大维度解锁Webpack3.0前端工程化(完整版)
2018年某课网 含第11章，且源码完整
〖课程介绍〗:( z; O% u& N* e. e+ O2 V, g+ m7 E
基于Webpack 3.0配合Loader、插件、工具的使用，搭建前端主流Vue、React、Angular的开发环境和项目框架，解决线上代码缓存、体积优化、本地开发环境代理请求等需求，提高开发效率！
〖课程目录〗:
第1章 课程简介2 W" G9 }: X( i) k: _
讲述课程背景，从前端开发的变化 到 前端工具的发展变化，介绍了课程内容，课程安排。) q8 T0 ^; i6 v9 F8 t& i
1-1 课程背景
1-2 导学
! x5 Y2 z# n0 w) v
第2章 学习准备
讲述模块化开发的思想、学习环境准备，webpack 的概况，版本更迭，核心概念等，为开始实践学习webpack 做准备。$ \6 k+ c+ ^2 n5 k( ^8 r: o$ J/ ^
2-1 学习准备 - 模块化（1）* l$ N9 L( K! n" Q
2-2 学习准备 - 模块化（2）
2-3 学习准备 - 环境准备(mac)2 c. g6 A$ u' h; f
2-4 学习准备 - webpack 简介0 l4 W. [7 j) Z1 S% [+ I
2-5 学习准备 - webpack 核心概念
% W/ g- J* s* m5 a: U' i$ o+ E$ Z
第3章 由浅入深Webpack（1）
由一个个的实例组成，介绍webpack 在处理各种实例的下的配置，实例包括 Typescript Ecmascript Less 语言的预编译，讲解了 Webpack 提取公共代码、代码分割、动态import、魔法注释、JS 和 CSS 的 TreeShaking等新特性。$ U" Y( z5 u+ R
3-1 由浅入深 webpack - 使用 webpack! x$ W8 H' l; U) D0 O2 J7 j
3-2 由浅入深 webpack - 打包 JS- H/ J S8 S, M, W6 S
3-3 由浅入深 webpack - 编译 ES6: j) t& x; L; h, R) v2 z& T
3-4 由浅入深 webpack - 编译 typescript/ I% c B) H7 l$ |. J( x
3-5 由浅入深 webpack - 打包公共代码（1）' M4 M. S" v: t0 K; h' |
3-6 由浅入深 webpack - 打包公共代码（2）
3-7 由浅入深 webpack - 代码分割和懒加载（1）
3-8 由浅入深 webpack - 代码分割和懒加载（2）/ L0 P& r$ `% E' ]0 r- `
3-9 由浅入深 webpack - 处理 CSS - style-loader（1）( t& s- X- _. i/ }! F
3-10 由浅入深 webpack - 处理 CSS - style-loader（2）
3-11 由浅入深 webpack - 处理 CSS - CSS-Loader
3-12 由浅入深 webpack - 处理 CSS - 配置 Less - Sass
3-13 由浅入深 webpack - 处理 CSS - 提取 CSS
3-14 由浅入深 webpack - PostCSS-in-webpack7 o+ O8 X8 B; e
3-15 由浅入深 webpack - Tree-shaking - JS Tree-shaking& {/ I! K. ?( w( L; Q7 L
3-16 由浅入深 webpack - Tree-shaking - CSS Tree-shaking$ {& I5 I/ _2 @/ A/ Z
第4章 由浅入深Webpack（2）
图片的压缩、CSS 雪碧图、PostCSS 的使用、HTML 的生成等。/ B+ U3 d$ N9 s" s+ k
4-1 文件处理（1）- 图片处理 - CSS中引入图片、Base64编码
4-2 文件处理（2）- 图片处理 - 压缩图片、自动合成雪碧图sprite、retina处理6 X4 c0 V( g% Y% D
4-3 文件处理（3）- 处理字体文件& G! ?) e( \! G: Q3 ~& S
4-4 文件处理（4）- 处理第三方 JS 库（providePlugin、imports-loader）. ]* q6 U8 u. _6 ]3 M
4-5 html in webpack（1） - 生成 HTML
4-6 html in webpack（2） - HTML 中引入图片, j. }7 d8 E. x# r3 T; \4 z
4-7 html in webpack（3） - 配合优化
第5章 Webpack 环境配置
介绍如何搭建 Webpack 本地开发环境，配置模块热更新、如何通过SourceMap调试代码、通过代码检查工具提高代码质量。
5-1 开发环境 - Webpack Watch Mode7 _8 r, T: x) I3 l" E( ]
5-2 开发环境 - Webpack Dev Server - 本地 rewrite 规则-$ e2 V' E& H/ a
5-3 开发环境 - 代理远程接口
5-4 开发环境 - 模块热更新
5-5 开发环境 - 开启调试SourceMap
5-6 开发环境 - 设置 ESLint 检查代码格式
5-7 开发环境 - 区分开发环境 和 生产环境（1）
5-8 开发环境 - 区分开发环境 和 生产环境（2）
5-9 开发环境 - 使用 middleware 来搭建开发环境# m7 K& z0 C: W3 {$ E/ w
第6章 Webpack 实战场景$ X2 S6 }8 v" i0 H
介绍Webpack 打包分析工具，如果使用webpack 长缓存优化，如何提升打包速度。- C# Y) L! ?4 v; b0 y
6-1 Webpack实战场景 - 分析打包结果
6-2 webpack 实战场景 - 优化打包速度（1） z$ y) |$ u- q% R" l3 [( I
6-3 webpack 实战场景 - 优化打包速度（2）" H8 N' z/ c6 F, g. o5 @7 a
6-4 webpack 实战场景 - 长缓存优化
6-5 webpack 实战场景 - webpack 多页面应用（1）9 L/ O E5 b. m. a; S4 J
6-6 webpack 实战场景 - webpack 多页面应用（2）
第7章 Webpack 和 Vue
介绍Webpack 和 Vue 的结合，Vue-cli 的模版介绍，以及模版中的各项配置。. u" o& \ T5 x% L ^3 i7 A( s
7-1 Vue 和 webpack - Vue-cli 介绍4 |$ j$ a& Q8 p/ U. V) `
7-2 Vue 和 webpack - Webpack template
7-3 vue 和 webpack - 开发配置（1）- e4 f4 l d2 l; R# C) J3 y; a
7-4 vue 和 webpack - 开发配置（2）
7-5 vue 和 webpack - 实现简单 todolist（1）# E/ l$ R% e7 b
7-6 vue 和 webpack - 实现简单 todolist（2）
第8章 Webpack 和 React* ?9 I2 G: a# P9 D3 y
介绍Webpack 和 React 的结合，介绍官方脚手架 Create-React-App 以及各种配置。& P! X: \- ]# u9 ~- S9 ^
8-1 React 和 webpack - create-react-app 介绍
8-2 React 和 webpack - create-react-app 运行脚本介绍
8-3 React 和 Webpack - create-react-app 配置: Y2 k' [( M- |! j7 \& G3 j
8-4 React 和 Webpack - 自定义配置! n" q! T8 X' v5 E C2 s$ w
! U: o% g# c7 i8 \, H
第9章 Webpack 和 Angular
介绍 Webpack 和 Angular的结合，介绍官方命令行工具 Angular-cli，以及如何自定义配置。
9-1 Angular 和 webpack - Angular - cli 介绍1 F5 g2 p0 I: M/ d# O
9-2 Angular 和 webpack - 模块热更新 和 自定义配置
第10章 课程总结
webpack相关面试技术讲解。
10-1 课程总结 - webpack 面试常见问题
10-2 课程总结 - 课程回顾和总结
第11章 Webpack 4更新, Q6 }6 B' y, A( C0 R
针对Webpack3.x与4.x差异，讲解了一些比较基础的差异：默认配置、mode、Tree Shaking 和 代码切分' C) C' y9 @7 Q# _4 {
11-1 Webpack 4 默认配置 和 mode
11-2 Webpack 4 优化、Tree Shaking 和 代码切分（1）
11-3 Webpack 4 优化、Tree Shaking 和 代码切分（2）;
| 
发表于 2019-4-16 17:01:31
发表于 2019-7-26 08:46:41
发表于 2019-7-27 14:44:47
发表于 2021-3-26 10:25:25