00.课件软件使用说明.mp4
00.课程介绍.mp4
01.基础-为什么要使用Webpack.mp4
02.基础-Webpack介绍&基本使用.mp4
03.基础-Webpack5大核心概念.mp4
04.基础-Webpack基本配置.mp4
05.基础-开发模式的介绍.mp4
06.基础-处理css资源.mp4
07.基础-处理less资源.mp4
08.基础-处理sass资源.mp4
09.基础-处理stylus资源.mp4
10.基础-处理图片资源.mp4
11.基础-修改输出文件目录.mp4
12.基础-自动清空上次打包内容.mp4
13.基础-处理字体图标资源.mp4
14.基础-处理其他资源.mp4
15.基础-处理js资源介绍.mp4
16.基础-eslint介绍.mp4
17.基础-eslint使用.mp4
18.基础-babel介绍.mp4
19.基础-babel使用.mp4
20.基础-处理html资源.mp4
21.基础-搭建开发服务器.mp4
22.基础-总结开发模式配置.mp4
23.基础-生产模式准备工作.mp4
24.基础-提取css成单独文件.mp4
25.基础-样式兼容性处理.mp4
26.基础-封装样式loader函数.mp4
27.基础-css压缩.mp4
28.基础-html和js压缩介绍.mp4
29.基础-Webpack基础总结.mp4
30.高级-Webpack高级介绍.mp4
31.高级-SourceMap.mp4
32.高级-HMR.mp4
33.高级-OneOf.mp4
34.高级-Include-Exclude.mp4
35.高级-Eslint和Babel的缓存.mp4
36.高级-多进程打包.mp4
37.高级-TreeShaking.mp4
38.高级-减少Babel生成文件的体积.mp4
39.高级-压缩图片.mp4
40.高级-CodeSplit-多入口.mp4
41.高级-CodeSplit-多入口提取公共模块.mp4
42.高级-CodeSplit-多入口按需加载.mp4
43.高级-CodeSplit-单入口.mp4
44.高级-CodeSplit-给模块命名.mp4
45.高级-CodeSplit-统一命名.mp4
46.高级-Preload和Prefetch.mp4
47.高级-Network Cache.mp4
48.高级-解决js兼容性问题CoreJS.mp4
49.高级-PWA.mp4
50.高级-总结.mp4
51.项目-介绍.mp4
52.项目-ReactCli-开发模式配置-上.mp4
53.项目-ReactCli-开发模式配置-下.mp4
54.项目-ReactCli-生产模式配置-上.mp4
55.项目-ReactCli-生产模式配置-下.mp4
56.项目-ReactCli-合并配置.mp4
57.项目-ReactCli-优化配置.mp4
58.项目-VueCli-开发模式配置.mp4
59.项目-VueCli-生产模式配置.mp4
60.项目-VueCli-合并配置.mp4
61.项目-VueCli-优化配置.mp4
62.项目-总结.mp4
63.原理-loader介绍.mp4
64.原理-第一个loader.mp4
65.原理-同步loader.mp4
66.原理-异步loader.mp4
67.原理-raw loader.mp4
68.原理-pitch loader.mp4
69.原理-loader API.mp4
70.原理-自定义clean-log-loader.mp4
71.原理-自定义banner-loader.mp4
72.原理-自定义babel-loader.mp4
73.原理-自定义file-loader.mp4
74.原理-自定义style-loader.mp4
75.原理-loader总结.mp4
76.原理-plugin介绍.mp4
77.原理-第一个plugin.mp4
78.原理-注册hooks.mp4
79.原理-通过node调试查看compiler和compilation对象.mp4
80.原理-自定义BannerWebpackPlugin.mp4
81.原理-自定义CleanWebpackPlugin.mp4
82.原理-自定义AnalyzeWebpackPlugin.mp4
83.原理-InlineChunkWebpackPlugin基本介绍.mp4
84.原理-HtmlWebpackPlugin工作原理分析.mp4
85.原理-完成InlineChunkWebpackPlugin.mp4
86.原理-总结plugin.mp4
代码.rar
课件.rar
有需要联系v；加客服窗口的联系方式
摘要：本文以《尚硅谷Webpack5从入门到原理2022年5月》为中心，全面解析Webpack5的核心概念、配置方法、插件应用以及性能优化，旨在帮助读者深入理解Webpack5的原理，掌握其高级应用技巧。
1、Webpack5核心概念
Webpack5是前端构建工具Webpack的最新版本，相较于前代版本，Webpack5在性能、兼容性和易用性方面都有了显著提升。本文首先介绍了Webpack5的核心概念，包括模块化、打包、插件系统等，帮助读者建立对Webpack5的整体认识。
Webpack5通过模块化将代码分割成多个模块，每个模块可以独立打包，提高了代码的复用性和可维护性。同时，Webpack5提供了丰富的插件系统，可以扩展Webpack的功能，满足不同项目的需求。
此外，Webpack5还引入了新的打包模式，如动态导入、懒加载等，进一步优化了代码的加载和执行效率。
2、Webpack5配置方法
Webpack5的配置方法相较于前代版本更加灵活和易用。本文详细介绍了Webpack5的配置方法，包括配置文件、入口和出口、加载器、插件等。
配置文件是Webpack的核心，通过配置文件可以定义Webpack的打包行为。本文以一个简单的示例，展示了如何配置Webpack5的入口和出口，以及如何使用加载器处理不同类型的文件。
此外，本文还介绍了Webpack5的插件系统，通过插件可以扩展Webpack的功能，如压缩代码、生成HTML文件等。
3、Webpack5插件应用
Webpack5的插件系统是其强大的功能之一。本文详细介绍了Webpack5的常用插件，如HtmlWebpackPlugin、CleanWebpackPlugin、UglifyJsPlugin等。
HtmlWebpackPlugin用于生成HTML文件，CleanWebpackPlugin用于清理输出目录，UglifyJsPlugin用于压缩代码。本文通过实际案例，展示了如何使用这些插件，提高Webpack5的打包效率和质量。
此外，本文还介绍了如何自定义插件，以满足特定项目的需求。
4、Webpack5性能优化
Webpack5的性能优化是提高项目性能的关键。本文从多个方面介绍了Webpack5的性能优化方法，包括代码分割、懒加载、缓存等。
代码分割可以将代码分割成多个块，按需加载，减少初始加载时间。懒加载可以将非首屏代码延迟加载，进一步提高性能。缓存可以将已打包的文件缓存起来，避免重复打包，提高构建速度。
此外，本文还介绍了Webpack5的缓存策略，以及如何通过配置优化缓存效果。
总结：
本文从Webpack5的核心概念、配置方法、插件应用以及性能优化四个方面，全面解析了Webpack5的原理和应用技巧。通过本文的学习，读者可以深入理解Webpack5，掌握其高级应用技巧，提高项目构建效率和质量。
本文由nayona.cn整理
联系我们
关注公众号
微信扫一扫
支付宝扫一扫
