收藏网站

使用 Ctrl+D 可将网站添加到书签

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

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

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

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

报名人数已满该课程已出新版，查看新课 >>

基于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

万事俱备只等你来

Lusssn

好评

质量很好，覆盖内容全面到位，自己踩坑不知道猴年马月才能掌握课程的内容，感谢老师的分享！竟然还会有更新，不能更赞了，疯狂打call
Domy

好评

老师讲课思路非常清晰，课程内容充实饱满，涉及webpack的方方面面，全网看这一个就足够了。感谢老师的付出，这个课程太实用！
灰色頭像

好评

这么课程个人觉得买的非常值得，老师讲解的特别好，帮助梳理webpack常用的配置，之前看到配置就头疼，看过课程之后，真心觉得帮助挺大的，非常感谢老师！