收藏

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

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

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

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

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

  • 第1章 课程简介 试看 2 节 | 32分钟

    讲述课程背景,从前端开发的变化 到 前端工具的发展变化,介绍了课程内容,课程安排。

    收起列表

    • 视频: 1-1 课程背景 (27:54)
    • 视频: 1-2 导学 (03:49) 试看
  • 第2章 学习准备 5 节 | 67分钟

    讲述模块化开发的思想、学习环境准备,webpack 的概况,版本更迭,核心概念等,为开始实践学习webpack 做准备。

    收起列表

    • 视频: 2-1 学习准备 - 模块化(1) (14:49)
    • 视频: 2-2 学习准备 - 模块化(2) (13:02)
    • 视频: 2-3 学习准备 - 环境准备(mac) (07:35)
    • 视频: 2-4 学习准备 - webpack 简介 (15:18)
    • 视频: 2-5 学习准备 - webpack 核心概念 (16:08)
  • 第3章 由浅入深Webpack(1) 试看 16 节 | 207分钟

    由一个个的实例组成,介绍webpack 在处理各种实例的下的配置,实例包括 Typescript Ecmascript Less 语言的预编译,讲解了 Webpack 提取公共代码、代码分割、动态import、魔法注释、JS 和 CSS 的 TreeShaking等新特性。

    收起列表

    • 视频: 3-1 由浅入深 webpack - 使用 webpack (12:38)
    • 视频: 3-2 由浅入深 webpack - 打包 JS (12:03) 试看
    • 视频: 3-3 由浅入深 webpack - 编译 ES6 (26:09) 试看
    • 视频: 3-4 由浅入深 webpack - 编译 typescript (18:48)
    • 视频: 3-5 由浅入深 webpack - 打包公共代码(1) (12:26)
    • 视频: 3-6 由浅入深 webpack - 打包公共代码(2) (10:05)
    • 视频: 3-7 由浅入深 webpack - 代码分割和懒加载(1) (15:25)
    • 视频: 3-8 由浅入深 webpack - 代码分割和懒加载(2) (13:17)
    • 视频: 3-9 由浅入深 webpack - 处理 CSS - style-loader(1) (14:30)
    • 视频: 3-10 由浅入深 webpack - 处理 CSS - style-loader(2) (10:06)
    • 视频: 3-11 由浅入深 webpack - 处理 CSS - CSS-Loader (09:27)
    • 视频: 3-12 由浅入深 webpack - 处理 CSS - 配置 Less - Sass (03:02)
    • 视频: 3-13 由浅入深 webpack - 处理 CSS - 提取 CSS (13:43)
    • 视频: 3-14 由浅入深 webpack - PostCSS-in-webpack (11:14)
    • 视频: 3-15 由浅入深 webpack - Tree-shaking - JS Tree-shaking (14:51)
    • 视频: 3-16 由浅入深 webpack - Tree-shaking - CSS Tree-shaking (09:03)
  • 第4章 由浅入深Webpack(2) 7 节 | 73分钟

    图片的压缩、CSS 雪碧图、PostCSS 的使用、HTML 的生成等。

    收起列表

    • 视频: 4-1 文件处理(1)- 图片处理 - CSS中引入图片、Base64编码 (18:25)
    • 视频: 4-2 文件处理(2)- 图片处理 - 压缩图片、自动合成雪碧图sprite、retina处理 (09:20)
    • 视频: 4-3 文件处理(3)- 处理字体文件 (04:54)
    • 视频: 4-4 文件处理(4)- 处理第三方 JS 库(providePlugin、imports-loader) (11:00)
    • 视频: 4-5 html in webpack(1) - 生成 HTML (11:26)
    • 视频: 4-6 html in webpack(2) - HTML 中引入图片 (10:02)
    • 视频: 4-7 html in webpack(3) - 配合优化 (06:56)
  • 第5章 Webpack 环境配置 9 节 | 145分钟

    介绍如何搭建 Webpack 本地开发环境,配置模块热更新、如何通过SourceMap调试代码、通过代码检查工具提高代码质量。

    收起列表

    • 视频: 5-1 开发环境 - Webpack Watch Mode (08:05)
    • 视频: 5-2 开发环境 - Webpack Dev Server - 本地 rewrite 规则- (19:33)
    • 视频: 5-3 开发环境 - 代理远程接口 (16:09)
    • 视频: 5-4 开发环境 - 模块热更新 (20:01)
    • 视频: 5-5 开发环境 - 开启调试SourceMap (14:22)
    • 视频: 5-6 开发环境 - 设置 ESLint 检查代码格式 (15:04)
    • 视频: 5-7 开发环境 - 区分开发环境 和 生产环境(1) (12:49)
    • 视频: 5-8 开发环境 - 区分开发环境 和 生产环境(2) (18:58)
    • 视频: 5-9 开发环境 - 使用 middleware 来搭建开发环境 (19:28)
  • 第6章 Webpack 实战场景 6 节 | 108分钟

    介绍Webpack 打包分析工具,如果使用webpack 长缓存优化,如何提升打包速度。

    收起列表

    • 视频: 6-1 Webpack实战场景 - 分析打包结果 (18:25)
    • 视频: 6-2 webpack 实战场景 - 优化打包速度(1) (08:28)
    • 视频: 6-3 webpack 实战场景 - 优化打包速度(2) (18:02)
    • 视频: 6-4 webpack 实战场景 - 长缓存优化 (17:59)
    • 视频: 6-5 webpack 实战场景 - webpack 多页面应用(1) (21:46)
    • 视频: 6-6 webpack 实战场景 - webpack 多页面应用(2) (22:34)
  • 第7章 Webpack 和 Vue 6 节 | 97分钟

    介绍Webpack 和 Vue 的结合,Vue-cli 的模版介绍,以及模版中的各项配置。

    收起列表

    • 视频: 7-1 Vue 和 webpack - Vue-cli 介绍 (09:51)
    • 视频: 7-2 Vue 和 webpack - Webpack template (20:00)
    • 视频: 7-3 vue 和 webpack - 开发配置(1) (19:32)
    • 视频: 7-4 vue 和 webpack - 开发配置(2) (14:51)
    • 视频: 7-5 vue 和 webpack - 实现简单 todolist(1) (15:55)
    • 视频: 7-6 vue 和 webpack - 实现简单 todolist(2) (16:11)
  • 第8章 Webpack 和 React 4 节 | 61分钟

    介绍Webpack 和 React 的结合,介绍官方脚手架 Create-React-App 以及各种配置。

    收起列表

    • 视频: 8-1 React 和 webpack - create-react-app 介绍 (10:14)
    • 视频: 8-2 React 和 webpack - create-react-app 运行脚本介绍 (17:46)
    • 视频: 8-3 React 和 Webpack - create-react-app 配置 (16:55)
    • 视频: 8-4 React 和 Webpack - 自定义配置 (15:32)
  • 第9章 Webpack 和 Angular 2 节 | 38分钟

    介绍 Webpack 和 Angular的结合,介绍官方命令行工具 Angular-cli,以及如何自定义配置。

    收起列表

    • 视频: 9-1 Angular 和 webpack - Angular - cli 介绍 (24:18)
    • 视频: 9-2 Angular 和 webpack - 模块热更新 和 自定义配置 (12:45)
  • 第10章 课程总结 2 节 | 23分钟

    webpack相关面试技术讲解。

    收起列表

    • 视频: 10-1 课程总结 - webpack 面试常见问题 (15:00)
    • 视频: 10-2 课程总结 - 课程回顾和总结 (07:52)
  • 第11章 Webpack 4更新 3 节 | 40分钟

    针对Webpack3.x与4.x差异,讲解了一些比较基础的差异:默认配置、mode、Tree Shaking 和 代码切分

    收起列表

    • 视频: 11-1 Webpack 4 默认配置 和 mode (13:28)
    • 视频: 11-2 Webpack 4 优化、Tree Shaking 和 代码切分(1) (13:34)
    • 视频: 11-3 Webpack 4 优化、Tree Shaking 和 代码切分(2) (12:43)
本课程已完结


讲师

qbaty Web前端工程师

资深前端工程师,研发经理,前新浪RIA工程师,前腾讯MIG,前端高级工程师,开源库-ISlider作者,MT框架参与者,喜欢写程序就酱

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

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

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