|
这个专栏不仅是一个 Webpack 的学习专栏,有大量的 Tips,更是一个比官方文档更实用,更贴合实际应用的 “Webpack 手册”, 是一个你可以 “长期使用 “,“随时可查” 的工具,工作中遇到的实际问题,你甚至能在专栏中找到直接或类似的配置方法、解决方案。
1 }7 S+ H+ W3 P* M s( |课程目录 :
" [( v9 Z2 t! F! t( |; C: i01 使用 Webpack 实现前端工程化
2 [* t& o4 V* X& }( @5 w, y( ~02 什么是 Webpack
! r- \* z1 q @" q03 Webpack 开发环境搭建; `0 R( F8 l8 E+ x* d5 O& V
04 使用 webpack-cli 体验零配置打包6 O/ i) G9 a9 l1 s- h
05 基础概念和常见配置项介绍(一)
, i) @7 b' E. f3 q, y! J- \06 基础概念和常见配置项介绍(二)
9 b9 Z* }, \! j+ R8 y# B7 k07 Webpack 中的模块化开发
s( G& Y3 i6 ~) z8 j! o08 在 Webpack 中使用 Babel 转换 JavaScript 代码
( Y- x+ R; w0 T: Z8 j/ U09 Webpack 中使用 TypeScript 开发项目4 z4 b) X& ^' D
10 Webpack 中样式相关的配置
4 |' t, l G, \, \ |1 H11 Webpack 中使用 lint 工具来保证代码风格和质量
( e( k9 _$ c% [: e/ i" n* x12 使用 Webpack 管理项目中的静态资源
* `3 ]* i- y4 @# n. L: F13 Webpack 中打包 HTML 和多页面配置
! @% g, C, a% ]" v; ^5 e3 r14 Webpack Dev Server 本地开发服务$ _' V; d; U2 C: [$ [
15 Webpack 中配置React和Vue开发环境# e7 S" g$ ?: ]! \- E) l" l
16 Webpack 环境相关配置及配置文件拆分
" M$ [$ \2 c' x7 { c17 Webpack 优化之体积优化
+ }# J5 G% b9 m3 F) M n18 Webpack 优化之增强缓存命中率
c9 |; F I+ w* K) B! E19 使用 Webpack 的 splitChunks 功能来拆分代码6 ~2 ~$ z* d2 |" T" c
20 Webpack 优化之速度优化
k, K/ g; l* A2 T7 k21 使用 Webpack 的 Tree-Shaking
* ~5 p0 h) W& y2 F22 为你准备了一份 Webpack 工程化最佳实践总结3 Z% p9 A# T" ?! t, e' a8 v4 }+ w
23 怎么调试 Webpack?
5 z0 r" }1 N( `9 d% Q4 x24 Tapable —— Webpack 的核心模块% m% X( g. a5 T: b a
25 Webpack 的 Compiler 和 Compilation
s4 l7 t' D. }- p26 Webpack 工作流程
! A& L& K$ g" V3 G& J+ h27 从 Webpack 的产出代码来看 Webpack 是怎么执行的; @' h: R/ h; S; r* w* N
28 Webpack 的模块热替换做了什么?
8 I' m. d! V- }* ]1 q9 V3 w29 实战:使用 PostCSS 打造移动适配方案
" p% `+ j5 ~- F9 H1 }8 ^$ O `4 o30 实战:手写一个 markdown-loader
6 \7 O3 K! H" S# H) t+ ~31 实战:手写一个 prefetch-webpack-plugin 插件
n' W5 h6 H7 v k32 实战:使用中间件来实现 Webpack-dev-server
8 D6 U V! K1 B33 实战:使用 Stats 数据结构生成 Webpack 构建报告
6 O/ P8 c! U, _9 F3 Y+ H34 实战:给 Webpack 项目添加 modern 模式打包# P' u2 Z6 {" \$ y
35 Webpack 5.0$ S2 q$ u& p3 [. {
36 课程总结) M0 ^. i" @1 C) M0 I% `, B
37 附录:项目中常用的插件
) h4 M8 _& T$ H4 ^6 |4 V# M! X38 附录:项目中常用的 loader t0 t# P" J' H; T
% Q5 r. v( f% ?" {
|
|