找回密码
 立即注册
查看: 839|回复: 0

从基础到实战 手把手带你掌握新版Webpack4.0

[复制链接]
累计签到:85 天
连续签到:1 天
发表于 2019-6-25 12:23:25 | 显示全部楼层 |阅读模式
第1章 课程导学(打消你的学习疑虑)
# I1 T* T3 m* |4 O掌握Webpack越来越成为前端工程师的标配技能,本章会对课程整体进行介绍,打消你的学习疑虑。
' d, d4 ~" w- \# d1 }- v 1-1 课程导学
# G9 a0 }7 s, u8 s: ]6 g* i3 \7 |( R- R3 l+ u* {8 ]( p& O
第2章 Webpack 初探/ c% r6 D4 W6 y) C1 `7 h: E5 F
本章通过清晰易懂的例子,带你了解 Webpack 的产生背景,以及其能够解决的问题。在此基础上,完成开发环境的搭建,Webpack 的安装,并进行最基础的 Webpack 使用讲解。. U1 R8 y3 _# z
2-1 webpack 究竟是什么?6 O# k/ w4 [. r7 R+ u- m
2-2 什么是模块打包工具?
& S4 @/ O- u% I5 U7 U 2-3 Webpack的正确安装方式9 H0 O! f1 z  w" W3 H
2-4 使用Webpack的配置文件
, E+ P: J3 ]; n: D# P' u" B 2-5 浅析 Webpack 打包输出内容
1 k" k4 K# K& z: p' d( |; y
" @' N3 z4 _7 k& E- z0 M" Q; U2 d第3章 Webpack 的核心概念
+ J. q. }5 M  W+ f$ Q本章讲解 Webpack 中的一些核心概念,从 Loader 与 Plugin 开始,带你学明白 Webpack 的运行机制,然后逐步深入,扩展衍生出 SoureMap, HMR, WDS 等常见概念。本章课程学习过程中,额外增加了对 Webpack 官方文档的查阅方式讲解,帮助大家学会查阅文档。...# k( c8 @) n- V; T' l# |- K
3-1 什么是 loader 试看- o2 D. o" I3 ^
3-2 使用 Loader 打包静态资源(图片篇)7 ~/ `& q( W9 y9 f* T! g
3-3 使用 Loader 打包静态资源(样式篇 - 上)5 I7 n) Z  p. z6 w/ \4 V& Y7 S  V
3-4 使用 Loader 打包静态资源(样式篇 - 下): t9 J3 m1 m  s% s$ k- `
3-5 使用 plugins 让打包更便捷: G$ {. h: K) z- Q5 u
3-6 Entry 与 Output 的基础配置
# _1 T1 b6 A: T/ I. }/ S 3-7 SourceMap 的配置% N) M  f7 V& p7 Y  B  h
3-8 使用 WebpackDevServer 提升开发效率) s  s; j0 ]+ B3 _+ M! V; J" ?
3-9 Hot Module Replacement 热模块更新(1); }" R- V/ a  I
3-10 Hot Module Replacement 热模块更新(2)# O- f7 i- W/ l& s9 C6 t
3-11 使用 Babel 处理 ES6 语法(1)
- d9 e8 h( X" P9 f8 z 3-12 使用 Babel 处理 ES6 语法(2)
* a$ L7 t/ w: [  s& s# R+ B( G 3-13 Webpack 实现对React框架代码的打包
! r! B' s0 `1 Q. n, R  h, v7 `* f! q  [; i" t: Y/ x2 A. K+ `  G
第4章 Webpack 的高级概念2 w$ h6 V  H% _! A  W0 u1 j( |
本章接第三章内容,继续讲解 Webpack 中难度更大的知识点,包含了 Tree Shaking,Code Spliting,打包环境区分,缓存,shimming 等内容,帮助你继续扩展 Webpack 的基础知识面。( E8 F8 u; }0 f5 l
4-1 Tree Shaking 概念详解 试看
5 l+ g1 L( M! L 4-2 Develoment 和 Production 模式的区分打包8 U$ r0 v/ D% N( s7 {6 e! w* x1 C
4-3 Webpack 和 Code Splitting(1)% l0 j% ]9 [& E; o! W! }3 B
4-4 Webpack 和 Code Splitting(2)
6 J9 E$ f9 x6 Z8 j6 C. A9 ^2 R3 [ 4-5 SplitChunksPlugin 配置参数详解(1)" k! P! P; }$ h/ N
4-6 SplitChunksPlugin 配置参数详解(2)0 `* r8 r( e5 g: T
4-7 Lazy Loading 懒加载,Chunk 是什么?/ f/ l1 x) q7 s. l7 z8 B
4-8 打包分析,Preloading, Prefetching0 }! H9 y9 [" _( D; [- c
4-9 CSS 文件的代码分割
' K3 r5 M' a; \2 I0 T7 T 4-10 Webpack 与浏览器缓存( Caching )1 L& M# w1 q, c# i; s2 B
4-11 Shimming 的作用
, M% [2 K8 S0 o# @/ s9 w( U# u 4-12 环境变量的使用方法
" Y" Y6 I% x$ g% I( ]: @& _) S8 U8 e6 n9 [: P
第5章 Webpack 实战配置案例讲解
, r- C( m; p' Y% p本章通过库文件打包,PWA项目打包,TypeScript打包支持等实战常见 Webpack 配置案例,带大家了解最新前端工程化常识,并在实例实现的过程中,巩固前三章节的基础知识点。同时章节末尾进行了 Webpack 打包性能优化的内容,帮助同学们了解如何在打包速度过慢时进行合理的打包过程优化。...5 B$ U( }: j) C3 }( \
5-1 Library 的打包1 z, Z) F/ P; C$ U
5-2 PWA 的打包配置6 S' N0 B2 c, z. S; j  e, t
5-3 TypeScript 的打包配置% G+ P5 |; n- H: T! E
5-4 使用 WebpackDevServer 实现请求转发
6 K1 J0 W4 U$ y 5-5 WebpackDevServer 解决单页面应用路由问题, y5 A0 h+ @; E- r, y8 M
5-6 EsLint 在 Webpack 中的配置(1)" l# k' _; v7 \% O' u9 {
5-7 EsLint 在 Webpack 中的配置(2)
* v% F4 C4 R6 D: o/ Q% S/ ^7 W 5-8 webpack 性能优化(1)1 x8 {; B* ]3 r$ q
5-9 webpack 性能优化(2)9 S: @2 C# X9 D' k3 `
5-10 Webpack 性能优化(3)
' k. u0 b# d  y/ U$ l4 o/ _4 I3 { 5-11 Webpack 性能优化(4)
: m8 h. }3 e8 M3 c 5-12 webpack性能优化(5)( N, B) E* _! j  y
5-13 多页面打包配置: N9 H' b3 G, u: ]2 M/ `$ i% [3 g
* q( ?, W" s; I4 T- d+ ?$ ~1 v9 B
第6章 Webpack 底层原理及脚手架工具分析  W9 a' f- q7 U8 z( Z) j# C
本章首先讲解如何自己实现 Webpack 中的 Loader 和 Plugin 的扩展。在了解 Webpack 扩展机制后,近一步深入 Webpack 底层,通过编码,实现了类似 Webpack 的简单打包工具,在此过程中,让同学们能够真正理解打包过程中的各种复杂概念及底层原理。..." ~% H# T" [5 d
6-1 如何编写一个 Loader(1)
+ y/ i, ]4 }  Z 6-2 如何编写一个 Loader(2). i* Z# E9 L( u% F
6-3 如何编写一个 Plugin9 @1 a+ p$ ]! u' P# h: M: `6 R7 B
6-4 Bundler 源码编写(模块分析 1)
$ _1 v9 ~! g6 M4 O* O* \$ d 6-5 Bundler 源码编写(模块分析 2)
$ Y8 D# P3 |6 u# `9 d' ?& N 6-6 Bundler 源码编写( Dependencies Graph )* Z/ o( ]' X% _  Y
6-7 Bundler 源码编写( 生成代码 )7 ]. t5 q5 ^: z" D4 B$ P( ^

! h2 G) k5 b9 X5 n7 q第7章 Create-React-App 和 Vue-Cli 3.0脚手架工具配置分析
; k: W$ k! X9 |$ b8 K  s7 I3 S' b+ N8 `最后一章增加了对 Create-React-App 和 Vue-Cli 3.0 两个前端脚手架工具中 Webpack 配置内容的分析,帮助同学了解不同脚手架工具设计的出发点,和配置的技巧。  ]' z. o4 L; \7 w" _
7-1 通过 CreateReactApp 深入学习 Webpack 配置(1)$ ~. p2 i; [) M( I: J  j
7-2 通过 CreateReactApp 深入学习 Webpack 配置(2)7 w  P3 j- C/ s3 b4 F
7-3 Vue CLI 3 的配置方法及课程总结(1)
. Y9 w! I1 x- @- q- _ 7-4 Vue CLI 3 的配置方法及课程总结(2)
7 H7 q5 i$ ~. M: {3 b  a$ S" o1 N# ~. e7 F, f3 \; m- U) R

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

点击这里给我发消息

QQ|小黑屋|Archiver|手机版|一路学IT论坛 专业视频教程网站

GMT+8, 2026-8-25 11:11

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表