实战 \四大维度解锁 Webpack 3.0 前端工程化

四大维度解锁 Webpack 3.0 前端工程化

难度 中级
时长 14小时
学习人数 154
10.0分
¥ 248.00

四大维度解锁 Webpack 3.0 前端工程化

四大维度解锁 Webpack 3.0 前端工程化
基于Webpack 3.0配合Loader、插件、工具的使用,搭建前端主流Vue、React、Angular的开发环境和项目框架,解决线上代码缓存、体积优化、本地开发环境代理请求等需求,提高开发效率!

Webpack最新版本 新功能爆料与解析

做每个项目开发时,学习和探索新技术是必须的! 将当前最火的Webpack 3.0新特性玩的6
才能提高自己在前端项目开发中不可替代性!

Webpack3.0 最新功能讲解:
Webpack 的全新 Webpack-cli
Webpack 的 Tree shaking 介绍
Webpack 的动态 import 函数
Webpack 的魔法注释
Webpack 作用域提升

Webpack工程化
核心技术配置前端项目工作流与开发环境

前端工程化开发,Webpack是必不可少的,熟练掌握Webpack + Express + Babel + Less + Postcss核心技术
的场景应用,让你的开发工作量成倍减少!

配置本地热更新 HMR

搭建本地开发环境 Express

配置ES2015 Babel

Vue-cli 项目脚手架

Tree-shaking 去除无用的代码

ESlint 检查代码格式

Webpack与主流框架搭配 最实用的技术应用

用React/Vue/Angular实现一个完整大型的项目,怎能少得了Webpack?贴近企业项目开发需求
因有了Webpack工具,大大减少了请求、提高了前端性能,实现新技术的应用,让你的项目开发效率倍增

模块化
开发理念

Webpack与
主流框架搭配

项目

Vue
Vue-cli 的介绍
Vue webpack 项目模板开发
Vue + Vue-router 的懒加载
React
官方脚手架create-react-app介绍
create-react-app 自定义项目配置
Angular
Angular-cli 介绍
Angular-cli 项目模版介绍
Angular-cli 自定义配置

Webpack与前端性能优化的完美诠释
提高你的优化功力

代码分割和懒加载:加载当页所需要最小代码提高加载速度

Webpack 打包长缓存:浏览器缓存提高访问速度

Tree-shaking、UglifyJs、CommonChunksPlugin:优化代码体积

图片转为Base64编码,自动生成雪碧图:减少HTTP请求

压缩图片:减少图片体积

清晰的讲解思路,让你对Webpack的应用一目了然!

学员专享增值服务

问答专区

讲师集中答疑

关于课程的问题都可在问答区随时提问
讲师会进行集中答疑

源码开放

整套代码下载

课程案例代码完全开放给你,你可以根据
所学知识自行修改、优化

适合人群及技术储备要求

随着模块化开发的普及,项目功能需求不断增加,Webpack已成为项目开发的标配,本课程适合前后端开发者深入学习Webpack工具的学员,全程每个技术点贯穿实战讲解,学完让你直接运用到企业项目开发,大大提高你的开发效率

学前必备技术

对模块化开发有一定的认识,了解Node.js基础知识

BAT资深前端开发工程师

Qbaty

BAT资深前端工程师,先后就职于新浪、小米等知名企业,主导开发过iSlider,参与开发过MT 等开源框架,拥有多年一线互联网项目开发经验,曾参与腾讯手机腾讯网、新浪微博、小米云平台等项目的开发。乐于把自己的开发经验分享给大家,授课风格言简意赅,句句干货,让你在有限的时间学到更多能应用到实际的硬技能

已在慕课网推出《webpack 深入与实战》免费课程,深受学员的喜爱,如果你对Wepack还不是很了解,建议先从免费课程学起

本次,他将带你探索最新Webpack 3.0强大的功能,让你占据技术前沿,深入学习并应用到实际项目中,提升你的开发效率!

环境参数

  • 技术语言 Javascript HTML CSS
  • 技术语言 ES6
  • IDE VS code
  • 工具框架 Webpack 3.10.1 PostCSS
  • 开发框架 Vue React Angular Express
提问
数据加载中...
意见反馈 常见问题 APP下载
官方微信