|
|
这个专栏不仅是一个 Webpack 的学习专栏,有大量的 Tips,更是一个比官方文档更实用,更贴合实际应用的 “Webpack 手册”, 是一个你可以 “长期使用 “,“随时可查” 的工具,工作中遇到的实际问题,你甚至能在专栏中找到直接或类似的配置方法、解决方案。
4 U! V0 ^5 B2 Z课程目录 :
1 E3 }* \4 b8 d& }# e- s01 使用 Webpack 实现前端工程化; K0 _! ~( c0 C+ ]# e
02 什么是 Webpack
L* e. M1 @4 N4 b( b03 Webpack 开发环境搭建+ S( B7 }/ P: A% `2 I9 K
04 使用 webpack-cli 体验零配置打包
+ J/ w) i. [1 c# R1 k: E05 基础概念和常见配置项介绍(一)9 s; |% R) U0 w: }
06 基础概念和常见配置项介绍(二)' y3 P& t2 E3 H5 ?
07 Webpack 中的模块化开发
B. r( u1 A. Z. b08 在 Webpack 中使用 Babel 转换 JavaScript 代码
* C3 W" J, L: P+ s0 T: T+ Y7 Z. T09 Webpack 中使用 TypeScript 开发项目 o" u& ]2 `3 h0 S% q. q% }/ o
10 Webpack 中样式相关的配置
6 Q4 o0 W7 |6 N9 N11 Webpack 中使用 lint 工具来保证代码风格和质量/ A; E' n# {+ ^9 q3 ?4 X
12 使用 Webpack 管理项目中的静态资源
9 e6 l$ W$ k/ d, K& _6 O13 Webpack 中打包 HTML 和多页面配置: R1 }/ I; `0 v, {& E' e. T8 D0 t
14 Webpack Dev Server 本地开发服务
6 ?" }& u2 t& J15 Webpack 中配置React和Vue开发环境
8 W5 \7 D. x3 V K16 Webpack 环境相关配置及配置文件拆分. i$ q9 X9 W8 G; G1 {# ^3 r
17 Webpack 优化之体积优化3 ^6 F) M) p: t5 a6 i1 o
18 Webpack 优化之增强缓存命中率
0 f* P4 p8 l' w/ T5 f" p19 使用 Webpack 的 splitChunks 功能来拆分代码
2 A4 Y6 Y% q: e4 `20 Webpack 优化之速度优化
4 c8 f/ _4 P& d8 n+ q3 l21 使用 Webpack 的 Tree-Shaking
( t8 C1 k$ e; F1 O/ j7 q22 为你准备了一份 Webpack 工程化最佳实践总结7 X% u l$ s$ U+ |: G# V3 H1 j
23 怎么调试 Webpack?, e( ?+ |9 t$ L$ _, j3 v
24 Tapable —— Webpack 的核心模块
3 P& X$ P; g' H- h4 a# |4 A25 Webpack 的 Compiler 和 Compilation2 `- n3 C: h9 S( q1 a; n3 k
26 Webpack 工作流程
! K$ U9 E0 w4 X& g0 b3 W! q27 从 Webpack 的产出代码来看 Webpack 是怎么执行的
. k E0 W/ k( C) ?, w% E; M I28 Webpack 的模块热替换做了什么?
8 m5 ?; B2 l+ A. O( n S/ A$ g29 实战:使用 PostCSS 打造移动适配方案. m) ?+ h2 T6 J
30 实战:手写一个 markdown-loader r% r; J3 \! K! \1 s! R" b% b
31 实战:手写一个 prefetch-webpack-plugin 插件
# I- U4 [3 o$ X1 B$ r1 k3 C" G4 B32 实战:使用中间件来实现 Webpack-dev-server
! q% ~! F5 D( A& ^33 实战:使用 Stats 数据结构生成 Webpack 构建报告
* n5 b0 p! F" @34 实战:给 Webpack 项目添加 modern 模式打包' A; Z {# U% I, B
35 Webpack 5.0
/ v3 e9 v/ H# q( O; @36 课程总结
. E8 g" n5 O+ E37 附录:项目中常用的插件( p$ |) ?5 J5 ~2 S4 f+ L4 r
38 附录:项目中常用的 loader2 o5 Z5 W, E% d$ f; r8 ~8 d
6 b, a9 M; ?1 e" U! y
|
|