01丨课程介绍.mp4
02丨内容综述.mp4
03丨为什么需要构建工具.mp4
04丨前端构建演变之路.mp4
05丨为什么选择webpack.mp4
06丨初识webpack.mp4
07丨环境搭建：安装webpack.mp4
08丨webpack初体验：一个最简单的例子.mp4
09丨通过npm script运行webpack.mp4
10丨webpack核心概念之entry用法.mp4
11丨webpack核心概念之output.mp4
12丨webpack核心概念之loaders.mp4
13丨webpack核心概念之plugins.mp4
14丨webpack核心概念之mode.mp4
15丨解析ES6和React JSX.mp4
16丨解析CSS、Less和Sass.mp4
17丨解析图片和字体.mp4
18丨webpack中的文件监听.mp4
19丨webpack中的热更新及原理分析.mp4
20丨文件指纹策略：chunkhash、contenthash和hash.mp4
21丨HTML 、CSS和JS代码压缩.mp4
22丨自动清理构建目录产物.mp4
23丨PostCSS插件autoprefixer自动补齐CSS3前缀.mp4
24丨移动端CSS px自动转换成rem.mp4
25丨静态资源内联.mp4
26丨多页面应用打包通用方案.mp4
27丨使用sourcemap.mp4
28丨提取页面公共资源.mp4
29丨treeshaking的使用和原理分析.mp4
30丨ScopeHoisting使用和原理分析.mp4
31丨代码分割和动态import.mp4
32丨webpack和ESLint结合.mp4
33丨webpack打包组件和基础库.mp4
34丨webpack实现SSR打包（上）.mp4
35丨webpack实现SSR打包（下）.mp4
36丨优化构建时命令行的显示日志.mp4
37丨构建异常和中断处理.mp4
38丨构建配置包设计.mp4
39丨功能模块设计和目录结构.mp4
40丨使用ESLint规范构建脚本.mp4
41丨冒烟测试介绍和实际运用.mp4
42丨单元测试和测试覆盖率.mp4
43丨持续集成和TravisCI.mp4
44丨发布到npm.mp4
45丨Git丨Commi规范和changelog生成.mp4
46丨语义化版本（Semantic丨Versioning）规范格式.mp4
47丨初级分析：使用webpack内置的stats.mp4
48丨速度分析：使用speed-measure-webpack-plugin.mp4
49丨体积分析：使用webpack-bundle-analyzer.mp4
50丨使用高版本的webpack和Node.mp4
51丨多进程多实例构建.mp4
52丨多进程多实例并行压缩.mp4
53丨进一步分包：预编译资源模块.mp4
54丨充分利用缓存提升二次构建速度.mp4
55丨缩小构建目标.mp4
56丨使用webpack进行图片压缩.mp4
57丨使用TreeShaking擦除无用的CSS.mp4
58丨使用动态Polyfill服务.mp4
59丨webpack启动过程分析.mp4
60丨webpack-cli源码阅读.mp4
61丨Tapable插件架构与Hooks设计.mp4
62丨Tapable是如何和Webpack进行关联起来的？.mp4
63丨webpack流程篇：准备阶段.mp4
64丨webpack流程篇：模块构建和chunk生成阶段.mp4
65丨webpack流程篇：文件生成.mp4
66丨动手编写一个简易的webpack(上).mp4
67丨动手编写一个简易的webpack(下).mp4
68丨loader的链式调用与执行顺序.mp4
69丨使用loader-runner高效进行loader的调试.mp4
70丨更复杂的loader的开发场.avi
71丨实战开发一个自动合成雪碧图的loader.mp4
72丨插件基本结构介绍.mp4
73丨更复杂的插件开发场景.mp4
74丨实战开发一个压缩构建资源为zip包的插件.avi
74丨实战开发一个压缩构建资源为zip包的插件_0001.avi
75丨商城技术栈选型和整体架构.mp4
76丨商城界面UI设计与模块拆分.mp4
77丨全家桶环境搭建.mp4
78丨数据库实体和表结构设计.mp4
79丨登录注册模块开发.mp4
80丨商品模块开发.mp4
81丨订单模块开发.mp4
82丨谈谈Web商城的性能优化策略.mp4
83丨功能开发总结.mp4
84丨结束语.avi
源码.zip
有需要联系v；加客服窗口的联系方式
摘要：随着前端技术的发展，Webpack已成为构建现代前端项目的核心工具。本文以《玩转webpack全方位掌握 webpack 核心技能和优化策略2020年5月》为中心，从Webpack的基本概念、配置、插件应用和性能优化四个方面，深入浅出地解析Webpack的核心技能和优化策略，帮助读者全面掌握Webpack的使用技巧。
1、Webpack基本概念
Webpack是一个现代JavaScript应用的静态模块打包器。它将项目中的模块按照指定的规则打包成一个或多个bundle，这些bundle可以被浏览器加载和执行。Webpack的核心概念包括入口（Entry）、输出（Output）、加载器（Loader）、插件（Plugin）和模式（Mode）等。
Webpack的入口是项目的起点，它指定了Webpack需要打包的文件。输出是Webpack打包后的结果，它定义了输出的文件名和路径。加载器是Webpack用来处理非JavaScript文件的插件，如CSS、图片等。插件是Webpack的扩展机制，它可以实现各种功能，如压缩、打包等。模式是Webpack的运行模式，包括开发模式和生产模式。
Webpack的基本概念是理解Webpack工作原理的基础，只有掌握了这些概念，才能更好地进行Webpack的配置和应用。
2、Webpack配置
Webpack配置是Webpack的核心部分，它决定了Webpack如何处理项目中的模块。Webpack配置文件通常是一个JavaScript或JSON文件，它包含了Webpack的各种配置项。
在Webpack配置中，需要配置入口、输出、加载器和插件等。例如，配置入口可以指定一个或多个文件作为入口，配置输出可以指定输出的文件名和路径，配置加载器可以指定处理非JavaScript文件的规则，配置插件可以添加各种功能。
Webpack配置是一个复杂的过程，需要根据项目的具体需求进行配置。掌握Webpack配置技巧，可以有效地提高Webpack的打包效率和性能。
3、Webpack插件应用
Webpack插件是Webpack的扩展机制，它可以实现各种功能，如压缩、打包、热更新等。Webpack插件的使用非常灵活，可以根据项目的需求选择合适的插件。
常见的Webpack插件包括HtmlWebpackPlugin、CleanWebpackPlugin、UglifyjsPlugin等。HtmlWebpackPlugin用于生成HTML文件，CleanWebpackPlugin用于清理输出目录，UglifyjsPlugin用于压缩JavaScript文件。
合理地使用Webpack插件，可以简化Webpack的配置过程，提高项目的打包效率和性能。
4、Webpack性能优化
Webpack的性能优化是提高项目打包效率的关键。Webpack的性能优化主要包括代码分割、缓存、懒加载等策略。
代码分割是将代码分割成多个小块，按需加载，可以减少初始加载时间。缓存可以将打包后的文件缓存起来，避免重复打包，提高打包速度。懒加载可以将非首屏代码延迟加载，减少初始加载时间。
Webpack的性能优化是一个持续的过程，需要根据项目的具体情况进行优化。掌握Webpack性能优化技巧，可以显著提高项目的打包效率和性能。
总结：
Webpack作为现代前端项目的核心工具，掌握Webpack的核心技能和优化策略对于前端开发者来说至关重要。《玩转webpack全方位掌握 webpack 核心技能和优化策略2020年5月》一书从Webpack的基本概念、配置、插件应用和性能优化四个方面进行了详细阐述，为读者提供了全面的学习资料。
本文通过对《玩转webpack全方位掌握 webpack 核心技能和优化策略2020年5月》的解读，帮助读者更好地理解Webpack的工作原理和使用技巧，提高Webpack的打包效率和性能。
本文由nayona.cn整理
联系我们
关注公众号
微信扫一扫
支付宝扫一扫
