首页 实战 Webpack5 入门与实战,前端开发必备技能
收藏

Webpack5 入门与实战,前端开发必备技能

融合技能+项目+思想,掌握 Webpack 的同时深化工程化思维

Webpack5 入门与实战,前端开发必备技能

难度 入门 时长 15小时 学习人数 60 综合评分 10.00

Webpack 作为一款可以提升开发效率、提高页面性能的工具,是前端开发者必备的技能。不过现实中还有很多前端同学对 Webpack的使用局限在调用阶段,对于其内部原理以及已有的配置不够了解,无法高效用好这个工具。本课程将通过一系列由浅入深的内容设计,帮助大家提升对 Webpack 的理解,并且能在实际业务中加以应用。

stevenzzw
讲师

技术专家

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看
课程目标

践行前端工程化,系统掌握 Webpack5 知识及开发应用

前端开发者的必备技能之一,从此打包配置有章法、更高效

吃透 Webpack5 深层原理
通过对启动链路、compiler 的运行分析
学习 Webpack,加深对配置使用的理解
为后续个人技术实操消除思维障碍
上手 Webpack5 高阶使用
不仅于 Webpack 模块的基础运用
更有多维度优秀实践经验总结
让你面对复杂项目的配置需求不慌乱
掌握 Webpack5 工程化实践
分别与 Vue、React 结合
实战相关前端项目的打包配置
扫除 Webpack5 实践中的常见细节问题
课程亮点

Webpack5 知识点全面讲解,不用再东拼西凑找答案

从基础使用到高阶运用再到原理解析,点、面结合学得更清晰

  • 了解构建发展
  • 初识webpack
  • 基础安装使用
  • 入口、出口
  • 认识Loader
  • 插件能力 plugin
  • 打包模式
  • SourceMap 应用与配置
  • WebpackDevServer
  • Babel 配置
  • 代码压缩、文件指纹
  • webpack构建流程分析
  • 认识tapable、compiler
  • loader的原理及自定义实现
  • 插件的原理及自定义实现
  • 自动兼容各个浏览器样式属性
  • rem的原理及自动转化
  • 正确的做Code Splitting
  • 精简各类日志
  • tree-shaking
  • eslint在webpack中如何配置
  • 实现多页面应用打包
  • 实现ssr应用的构建
  • 利用物理设备、缓存等
  • 优化构建速度
  • 缩减各类资源来见效
  • 构建体积
  • 编写一个新闻应用
  • 编写相应的webpack配置
  • 性能优化
  • 编写&构建npm包
  • 编写可扩展的webpack配置
  • 实现简单的脚手架
  • 无框架化构建

React / Vue 项目优化实战,落地实践中常遇到的 Webpack 各类高级用法

掌握多种实际优化手段,做项目更加得心应手

  • 新闻应用的基础准备
  • 功能拆分和基础界面设计
  • 服务端基础设计
  • 实战开发 - 登陆
  • 实战开发 - 新闻列表
  • 实战开发 - 详情页
  • 浅谈前端相关性能优化
  • 使用pwa优化当前应用
性能优化:
· 优化思路梳理,分析页面加载全链路
· 根据加载步骤逐步优化
· 实际业务场景中可用的优化手段
· 通过业务逻辑优化项目
pwa使用
· 了解pwa及其工作原理
· 常见的pwa使用场景
课程大纲
第1章 课程简介
课程的简单介绍~~
第2章 走进前端构建
通过本章了解前端的工程化历史,并且简单熟悉下当前业界应用最广泛的 webpack。
第3章 学会webpack基础用法,一次搞懂webpack的构建流程
通过本章了解webpack的基本配置使用及注意事项,并且可以实现使用webpack构建一个简单前端项目,加深对各项配置实际作用的印象。
第4章 了解webpack打包原理,对构建的理解更上一层楼
通过本章可以掌握webpack的运行过程以及其中关键环节的原理,比如loader和plugin,并且可以学会开发一个自定义的loader和plugin。
第5章 全方位掌握webpack高阶用法
本章主要介绍一些webpack的高阶用法,可以掌握一些在日常开发中提升开发效率、提高项目性能以及优化开发体验等常规技巧。
查看完整目录
专属服务

每个慕课网课程,都是一个专业的技术社区

个性化增值服务,学习有保障更高效

答疑专区+技术社区
连百度谷歌都搜不到的问题,在这里讲
师都将耐心详细解答,更有小伙伴一起
交流互动,共同进步。
课程全套代码下载
提供课程全套源代码下载,包含:
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。
独家“动态”教辅材料
丰富的专属教辅资料上传更新,通过课程
教案、原理图解、技术文档、演示案例等
各种教材,保障你的学习效果。
实用图文资料
部分简单内容以图文形式呈现,与视频
相配合,既保障学习效果,又提高了学
习效率。
适合人群
有一定的前端项目开发经验
技术储备
Html/Css基础
JS交互知识
环境参数
webpack 5
提问
数据加载中...
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题