价值248元的四大维度解锁 Webpack 3.0 前端工程化

2018年6月8日21:27:55 发表评论

视频介绍

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

课程大纲

  • 第1章 课程简介 讲述课程背景,从前端开发的变化 到 前端工具的发展变化,介绍了课程内容,课程安排。
    • 1-1 课程背景
    • 1-2 导学
  • 第2章 学习准备 讲述模块化开发的思想、学习环境准备,webpack 的概况,版本更迭,核心概念等,为开始实践学习webpack 做准备。
    • 2-1 学习准备 - 模块化(1)
    • 2-2 学习准备 - 模块化(2)
    • 2-3 学习准备 - 环境准备(mac)
    • 2-4 学习准备 - webpack 简介
    • 2-5 学习准备 - webpack 核心概念
  • 第3章 由浅入深Webpack(1) 由一个个的实例组成,介绍webpack 在处理各种实例的下的配置,实例包括 Typescript Ecmascript Less 语言的预编译,讲解了 Webpack 提取公共代码、代码分割、动态import、魔法注释、JS 和 CSS 的 TreeShaking等新特性。
    • 3-1 由浅入深 webpack - 使用 webpack
    • 3-2 由浅入深 webpack - 打包 JS
    • 3-3 由浅入深 webpack - 编译 ES6
    • 3-4 由浅入深 webpack - 编译 typescript
    • 3-5 由浅入深 webpack - 打包公共代码(1)
    • 3-6 由浅入深 webpack - 打包公共代码(2)
    • 3-7 由浅入深 webpack - 代码分割和懒加载(1)
    • 3-8 由浅入深 webpack - 代码分割和懒加载(2)
    • 3-9 由浅入深 webpack - 处理 CSS - style-loader(1)
    • 3-10 由浅入深 webpack - 处理 CSS - style-loader(2)
    • 3-11 由浅入深 webpack - 处理 CSS - CSS-Loader
    • 3-12 由浅入深 webpack - 处理 CSS - 配置 Less - Sass
    • 3-13 由浅入深 webpack - 处理 CSS - 提取 CSS
    • 3-14 由浅入深 webpack - PostCSS-in-webpack
    • 3-15 由浅入深 webpack - Tree-shaking - JS Tree-shaking
    • 3-16 由浅入深 webpack - Tree-shaking - CSS Tree-shaking
  • 第4章 由浅入深Webpack(2) 图片的压缩、CSS 雪碧图、PostCSS 的使用、HTML 的生成等。
    • 4-1 文件处理(1)- 图片处理 - CSS中引入图片、Base64编码
    • 4-2 文件处理(2)- 图片处理 - 压缩图片、自动合成雪碧图sprite、retina处理
    • 4-3 文件处理(3)- 处理字体文件
    • 4-4 文件处理(4)- 处理第三方 JS 库(providePlugin、imports-loader)
    • 4-5 html in webpack(1) - 生成 HTML
    • 4-6 html in webpack(2) - HTML 中引入图片
    • 4-7 html in webpack(3) - 配合优化
  • 第5章 Webpack 环境配置 介绍如何搭建 Webpack 本地开发环境,配置模块热更新、如何通过SourceMap调试代码、通过代码检查工具提高代码质量。
    • 5-1 开发环境 - Webpack Watch Mode
    • 5-2 开发环境 - Webpack Dev Server - 本地 rewrite 规则-
    • 5-3 开发环境 - 代理远程接口
    • 5-4 开发环境 - 模块热更新
    • 5-5 开发环境 - 开启调试SourceMap
    • 5-6 开发环境 - 设置 ESLint 检查代码格式
    • 5-7 开发环境 - 区分开发环境 和 生产环境(1)
    • 5-8 开发环境 - 区分开发环境 和 生产环境(2)
    • 5-9 开发环境 - 使用 middleware 来搭建开发环境
  • 第6章 Webpack 实战场景 介绍Webpack 打包分析工具,如果使用webpack 长缓存优化,如何提升打包速度。
    • 6-1 Webpack实战场景 - 分析打包结果
    • 6-2 webpack 实战场景 - 优化打包速度(1)
    • 6-3 webpack 实战场景 - 优化打包速度(2)
    • 6-4 webpack 实战场景 - 长缓存优化
    • 6-5 webpack 实战场景 - webpack 多页面应用(1)
    • 6-6 webpack 实战场景 - webpack 多页面应用(2)
  • 第7章 Webpack 和 Vue 介绍Webpack 和 Vue 的结合,Vue-cli 的模版介绍,以及模版中的各项配置。
    • 7-1 Vue 和 webpack - Vue-cli 介绍
    • 7-2 Vue 和 webpack - Webpack template
    • 7-3 vue 和 webpack - 开发配置(1)
    • 7-4 vue 和 webpack - 开发配置(2)
    • 7-5 vue 和 webpack - 实现简单 todolist(1)
    • 7-6 vue 和 webpack - 实现简单 todolist(2)
  • 第8章 Webpack 和 React 介绍Webpack 和 React 的结合,介绍官方脚手架 Create-React-App 以及各种配置。
    • 8-1 React 和 webpack - create-react-app 介绍
    • 8-2 React 和 webpack - create-react-app 运行脚本介绍
    • 8-3 React 和 Webpack - create-react-app 配置
    • 8-4 React 和 Webpack - 自定义配置
  • 第9章 Webpack 和 Angular 介绍 Webpack 和 Angular的结合,介绍官方命令行工具 Angular-cli,以及如何自定义配置。
    • 9-1 Angular 和 webpack - Angular - cli 介绍
    • 9-2 Angular 和 webpack - 模块热更新 和 自定义配置
  • 第10章 课程总结 webpack相关面试技术讲解。
    • 10-1 课程总结 - webpack 面试常见问题
    • 10-2 课程总结 - 课程回顾和总结

赠送多终端加速播放软件(PC/Android/IOS)

试听地址

资源大小

  • 4.58G

加速播放方法

  • 使用赠送的加速播放软件即可1到2.5倍速度播放本视频教程,加快学习速度

视频截图

 

资源下载

隐藏内容:******,购买后可见!

下载价格:24.8 元

您需要先后,才能购买资源

如发现资源链接失效,请留言或与站长联系。 联系QQ:305646985 微信:fengyun88996

  • 扫一扫加我的微信
  • weinxin
  • 扫一扫关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: