Webpack作为一款流行的前端项目构建工具,广泛应用于前端工程领域,是前端开发人员的必备技能之一。本套教程基于Webpack5讲解,从入门到高级,从项目实战到深入原理。
入门阶段,全方位覆盖前端资源处理,你在项目中解决资源处理的难题,将不再是问题!
高级阶段,详解Webpack5优化配置,从不同的角度对代码进行性能优化,提升项目打包构建速度和代码运行性能,轻松应对面试高频问题。
项目阶段,将基础阶段和高级阶段学以致用,从零开始搭建React脚手架和Vue脚手架。如果你想成为Webpack大神,原理阶段是本套教程精华,由浅入深讲解Webpack Loader和Plugin原理,让你在企业开发中有能力去自定义Loader和Plugin。
内容覆盖全面,讲解深入内里,教程可全学亦可选学。每个阶段的配置,都提供了完整代码和详细注释,让你边学边练,全面提升代码功底。
学习本套教程,需具备Node.js、React和Vue基础。
课程目录:
01.Webpack5-课程介绍
02.Webpack5-基础-为什么要使用Webpack
03.Webpack5-基础-Webpack介绍&基本使用
04.Webpack5-基础-Webpack5大核心概念
05.Webpack5-基础-Webpack基本配置
06.Webpack5-基础-开发模式的介绍
07.Webpack5-基础-处理css资源
08.Webpack5-基础-处理less资源
09.Webpack5-基础-处理sass资源
10.Webpack5-基础-处理stylus资源
11.Webpack5-基础-处理图片资源
12.Webpack5-基础-修改输出文件目录
13.Webpack5-基础-自动清空上次打包内容
14.Webpack5-基础-处理字体图标资源
15.Webpack5-基础-处理其他资源
16.Webpack5-基础-处理js资源介绍
17.Webpack5-基础-eslint介绍
18.Webpack5-基础-eslint使用
19.Webpack5-基础-babel介绍
20.Webpack5-基础-babel使用
21.Webpack5-基础-处理html资源
22.Webpack5-基础-搭建开发服务器
23.Webpack5-基础-总结开发模式配置
24.Webpack5-基础-生产模式准备工作
25.Webpack5-基础-提取css成单独文件
26.Webpack5-基础-样式兼容性处理
27.Webpack5-基础-封装样式loader函数
28.Webpack5-基础-css压缩
29.Webpack5-基础-html和js压缩介绍
30.Webpack5-基础-Webpack基础总结
31.Webpack5-高级-Webpack高级介绍
32.Webpack5-高级-SourceMap
33.Webpack5-高级-HMR
34.Webpack5-高级-OneOf
35.Webpack5-高级-Include-Exclude
36.Webpack5-高级-Eslint和Babel的缓存
37.Webpack5-高级-多进程打包
38.Webpack5-高级-TreeShaking
39.Webpack5-高级-减少Babel生成文件的体积
40.Webpack5-高级-压缩图片
41.Webpack5-高级-CodeSplit-多入口
42.Webpack5-高级-CodeSplit-多入口提取公共模块
43.Webpack5-高级-CodeSplit-多入口按需加载
44.Webpack5-高级-CodeSplit-单入口
45.Webpack5-高级-CodeSplit-给模块命名
46.Webpack5-高级-CodeSplit-统一命名
47.Webpack5-高级-Preload和Prefetch
48.Webpack5-高级-Network Cache
49.Webpack5-高级-解决js兼容性问题CoreJS
50.Webpack5-高级-PWA
51.Webpack5-高级-总结
52.Webpack5-项目-介绍
53.Webpack5-项目-ReactCli-开发模式配置-上
54.Webpack5-项目-ReactCli-开发模式配置-下
55.Webpack5-项目-ReactCli-生产模式配置-上
56.Webpack5-项目-ReactCli-生产模式配置-下
57.Webpack5-项目-ReactCli-合并配置
58.Webpack5-项目-ReactCli-优化配置
59.Webpack5-项目-VueCli-开发模式配置
60.Webpack5-项目-VueCli-生产模式配置
61.Webpack5-项目-VueCli-合并配置
62.Webpack5-项目-VueCli-优化配置
63.Webpack5-项目-总结
64.Webpack5-原理-loader介绍
65.Webpack5-原理-第一个loader
66.Webpack5-原理-同步loader
67.Webpack5-原理-异步loader
68.Webpack5-原理-raw loader
69.Webpack5-原理-pitch loader
70.Webpack5-原理-loader API
71.Webpack5-原理-自定义clean-log-loader
72.Webpack5-原理-自定义banner-loader
73.Webpack5-原理-自定义babel-loader
74.Webpack5-原理-自定义file-loader
75.Webpack5-原理-自定义style-loader
76.Webpack5-原理-loader总结
77.Webpack5-原理-plugin介绍
78.Webpack5-原理-第一个plugin
79.Webpack5-原理-注册hooks
80.Webpack5-原理-通过node调试查看compiler和compilation对象
81.Webpack5-原理-自定义BannerWebpackPlugin
82.Webpack5-原理-自定义CleanWebpackPlugin
83.Webpack5-原理-自定义AnalyzeWebpackPlugin
84.Webpack5-原理-InlineChunkWebpackPlugin基本介绍
85.Webpack5-原理-HtmlWebpackPlugin工作原理分析
86.Webpack5-原理-完成InlineChunkWebpackPlugin
87.Webpack5-原理-总结plugin
视频课件
视频代码