|
|
这个专栏不仅是一个 Webpack 的学习专栏,有大量的 Tips,更是一个比官方文档更实用,更贴合实际应用的 “Webpack 手册”, 是一个你可以 “长期使用 “,“随时可查” 的工具,工作中遇到的实际问题,你甚至能在专栏中找到直接或类似的配置方法、解决方案。8 F0 I* J7 q' J. O
课程目录 :! q6 l. t/ B$ y! W! r# T
01 使用 Webpack 实现前端工程化
& X! L' X1 q: d) L5 m02 什么是 Webpack: f$ |& N* H$ @, V. Z7 V& L0 q
03 Webpack 开发环境搭建# b2 o9 e7 s& Y
04 使用 webpack-cli 体验零配置打包$ X3 I# |( P j; U( ~5 ~: J6 v
05 基础概念和常见配置项介绍(一)
" y" U! _' Z4 z/ ~3 q/ Q06 基础概念和常见配置项介绍(二)/ s- z1 b" v$ s' \: J1 q
07 Webpack 中的模块化开发
# Z% U n6 {, t: T08 在 Webpack 中使用 Babel 转换 JavaScript 代码
( a: z+ s! U$ [ h) V) g2 E; Z09 Webpack 中使用 TypeScript 开发项目
$ i% [8 U+ t! @6 P P10 Webpack 中样式相关的配置0 O; I0 b1 B5 d
11 Webpack 中使用 lint 工具来保证代码风格和质量. A3 S4 ~6 }8 Z+ L) K
12 使用 Webpack 管理项目中的静态资源
+ R, }" Y9 l9 h& i3 @6 Y7 A0 F13 Webpack 中打包 HTML 和多页面配置0 j+ n2 N1 A2 R
14 Webpack Dev Server 本地开发服务
# \* ~* I* _& C8 q7 M15 Webpack 中配置React和Vue开发环境" C' f h0 X8 g0 [0 \
16 Webpack 环境相关配置及配置文件拆分* k: z# U3 Y6 c/ H* l
17 Webpack 优化之体积优化& {$ Q: Q: a6 A# A- w
18 Webpack 优化之增强缓存命中率' c/ U0 V0 {0 u' d* J
19 使用 Webpack 的 splitChunks 功能来拆分代码
6 Q$ M; b0 W: |9 Z( |. p$ d20 Webpack 优化之速度优化
6 U& F! ` f5 k" ?! J+ v21 使用 Webpack 的 Tree-Shaking
/ j( j# {( f# L% S: y, F( i* C22 为你准备了一份 Webpack 工程化最佳实践总结1 W0 p. x' a8 E7 T, C
23 怎么调试 Webpack?
+ S/ u0 L. C0 X$ n! H C24 Tapable —— Webpack 的核心模块
0 h" K5 S( U9 Y* [; s7 u; v25 Webpack 的 Compiler 和 Compilation
1 e" W1 w" _6 F- g- L5 T26 Webpack 工作流程
( |5 B, R# g7 n: A27 从 Webpack 的产出代码来看 Webpack 是怎么执行的0 @# m. _& X: w/ _* C6 y5 C
28 Webpack 的模块热替换做了什么?4 Z9 `7 e$ p3 M
29 实战:使用 PostCSS 打造移动适配方案# M" ^3 o! f0 d" F. t$ ~
30 实战:手写一个 markdown-loader& j. f, ]+ X8 k2 M' }; ?* ?2 C
31 实战:手写一个 prefetch-webpack-plugin 插件
% b" ^# T& A7 U T; O32 实战:使用中间件来实现 Webpack-dev-server5 X# V# i5 U J5 [/ a' S4 Z- E7 y
33 实战:使用 Stats 数据结构生成 Webpack 构建报告
) Y, ?" f5 N+ X0 s% E4 E34 实战:给 Webpack 项目添加 modern 模式打包
2 \4 K% D& z, X1 m4 K35 Webpack 5.0
1 e: t G: t* f8 ?36 课程总结
. t+ g6 i% U; ^2 B u: L37 附录:项目中常用的插件; ^1 R6 o) I y7 C& c
38 附录:项目中常用的 loader
$ T& E3 h% l! O: S! m+ i9 y' x, } ' f) |8 K8 g- C, ], g
|
|