联系

前端培训:熊键Webpack5从入门到原理

前端培训:尚硅谷熊键Webpack5从入门到原理

webpack作为现代前端开发中最火的模块打包工具,广泛应用于前端工程领域,是前端工程师必备的技能之一。全球知名公司(如:谷歌、阿里、腾讯等)都在使用webpack作为首选模块打包工具。

Webpack作为一款流行的前端项目构建工具,广泛应用于前端工程领域,是前端开发人员的必备技能之一。本套教程基于Webpack5讲解,从入门到高级,从项目实战到深入原理。

入门阶段,全方位覆盖前端资源处理,你在项目中解决资源处理的难题,将不再是问题!

高级阶段,详解Webpack5优化配置,从不同的角度对代码进行性能优化,提升项目打包构建速度和代码运行性能,轻松应对面试高频问题。

项目阶段,将基础阶段和高级阶段学以致用,从零开始搭建React脚手架和Vue脚手架。如果你想成为Webpack大神,原理阶段是本套教程精华,由浅入深讲解Webpack Loader和Plugin原理,让你在企业开发中有能力去自定义Loader和Plugin。

内容覆盖全面,讲解深入内里,教程可全学亦可选学。每个阶段的配置,都提供了完整代码和详细注释,让你边学边练,全面提升代码功底。

学习本套教程,需具备Node.js、React和Vue基础。

前端培训:熊键Webpack5从入门到原理

课程目录:

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

视频课件

视频代码

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注