首页 实战 四大维度解锁Webpack3.0前端工程化
收藏

四大维度解锁Webpack3.0前端工程化

3.0版本特性 / 工程化 / 主流框架应用 / 前端性能优化

四大维度解锁Webpack3.0前端工程化

难度 中级 时长 14小时 学习人数 1188 综合评分 10.00

四大维度解锁Webpack3.0前端工程化

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

qbaty
讲师

BAT资深前端开发工程师

课程预览

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

Webpack3.0版本 功能爆料与解析

做每个项目开发时,学习和探索新技术是必须的! 将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基础知识

环境参数

  • 技术语言 Javascript HTML CSS
  • 技术语言 ES6
  • IDE VS code
  • 工具框架 Webpack 3.10.1 PostCSS
  • 开发框架 Vue React Angular Express

万事俱备 只等你来

  • 之桃呀

    好评

    学习了四分之一的内容,首先要说 老师声音好好听!!!其次之前一直用vue-cli直接生成代码对webpack其实很皮毛,但是看了这个课真的底气足了很多,课程里的版本是3.10.0,可能是因为我学的比较晚的课程,里面章节会有因为版本的问题出现一些报错的情况,但我觉得这恰恰是自学掌握知识的机会,多翻翻官网去查找原因记的会更熟悉。 用webpack3做一遍之后,打算再用webpack4再配置一遍!!感谢老师

  • 松柏先生

    好评

    老师讲的很不错! 但是webpack的版本是很困扰的问题,比如,课程里面用的是webpack@3.10.0版本的,但是现在都webpack@4.5.0了!更新迭代的速度很快!所以,学习过程中,尽可能安装3.10.0版本的来学习!这门课程看了两遍,手撸一遍,虽然我对webpack不是很熟悉,但是这门课程让我对webpack不在恐惧! 特别是在学完这门课程之后,有学了一遍nodejs,现在感觉很自信! 我认为接下来,想研究webpack的话,首先看官网,熟悉官网之后,在加上这门课的基础,相信面对webpack不会再有以前的恐惧!

  • 八神光

    好评

    我是先学的老师之前的那个免费的webpack课程,学完后就算入门了,可以自己查文档看资料继续进阶。不过还是很期待老师能再接着把没讲到的讲一下,我还给慕女神发消息,让老师再录课程。出了付费课后我是果断买下了,这两天就学完了。可以说还是收获满满,打算听完课后自己再好好的整理一遍。 很好奇老师是怎么做课前准备的,想知道老师的学习方法,我自己的话很难掌握到老师这种程度,觉得涉及到的点太多,没有耐心每个点都去一一击破。 希望老师继续出课~

查看全部360条用户评价
提问
数据加载中...
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

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

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