limingziqiang/imooc-webpack

code forwebpack video lession

imooc-webpack

This is video lesson for imooc students Just webpack demo

Lesson-name: Webpack 3 前端工程化(Webpack 3 front-end work flow)

Lesson-url: https://coding.imooc.com/class/171.html

content

• 第一章 课程简介

  • 1.1 前端开发历史发展
  • 1.2 导学

• 第二章 学习准备

  • 2.1 模块化**
  • 2.2 开发环境准备
  • 2.3 webpack 简介
  • 2.4 webpack 核心概念

• 第三章 由浅入深Webpack

  • 3.1 使用 webpack （webpack-cli）
  • 3.2 打包 JS (三种不同模块化规范的js在webpack 中的打包)
  • 3.3 编译 ES6(babel 和 runtime)
  • 3.4 编译 Typescript
  • 3.5 提取公共代码
  • 3.5 代码分割 和 懒加载
  • 3.6 打包 CSS (style-loader)
  • 3.7 处理 CSS (css-loader)
  • 3.8 配置 CSS 预处理器 (less-loader)
  • 3.9 提取 CSS 到单独文件
  • 3.10 posscss
  • 3.11 JS Tree-shaking
  • 3.12 CSS Tree-shaking
  • 3.13 图片处理
  • 3.14 自动合成sprite
  • 3.15 处理字体文件
  • 3.16 处理第三方 JS 库
  • 3.17 处理 HTML

• 第四章 Webpack 环境配置

  • 4.1 Webpack Watch mode
  • 4.2 Webpack-dev-server historyApiFallback
  • 4.3 Webpack-dev-server 接口代理 proxy
  • 4.4 Hot Moduel Reloading
  • 4.5 区分开发环境 和 生产环境
  • 4.6 使用 middle 来搭建开发环境

• 第五章 Webpack 实战场景

  • 5.1 分析打包结果
  • 5.2 优化打包速度
  • 5.3 长缓存优化
  • 5.4 多页面应用

• 第六章 Webpack 和 Vue

  • 6.1 vue-cli 介绍
  • 6.2 vue-cli webpack template
  • 6.3 vue-cli webpack 开发配置
  • 6.4 使用 vue-cli 生成项目实现 todolist

• 第七章 Webpack 和 React

  • 7.1 create-react-app 介绍
  • 7.2 create-react-app 运行脚本
  • 7.3 create-react-app 相关配置
  • 7.4 create-react-app 自定义配置 和 模块热更新

• 第八章 Webpack 和 Angular

  • 8.1 Angular-cli 介绍
  • 8.2 Angular-cli 的配置和模块热更新

• 第九章 课程总结

  • 9.1 Webpack 面试常见问题
  • 9.2 课程回顾以及结语