Webpack

• 01-webpack概述及背景

• 03-webpack热更新原理

• 04-splitChunks原理分析

• 05-webpack工作流程

• 07-webpack构建流程

• 07-webpack构建流程

• 10-webpack 如何进行性能分析

webpack学习 课程大纲

• 课时 1: webpack 了解与基本配置

  • 背景

  • 打包工具对比

  • webpack版本对比（webpack5）（程度视基础能力而定）

    • 为什么有这些变化，解决了什么问题

  • 基本配置

    • entry out loader plugin

    • 文件指纹

• 课时 2: webpack 工程化配置

  • 开发、生产环境

  • Html处理

  • Js的处理

  • Css的处理

  • 提取页面公共资源

  • 多页面打包

  • 其他，不局限以上内容

• 课时 3: 热更新

  • 热启动

  • 热更新原理

• 课时 4: webpack 代码分割与动态引入

  • webpack3 4 代码分割实现原理

  • 动态引入实现原理

• 课时 5: webpack 工作流机制

  • Tapable Hooks

• 课时 6: splitThunk算法原理

• 课时 7: webpack 启动流程分析

  • webpack生命周期

• 课时 8: webpack 模块机制

  • CommonJS AMD module等规范统一、兼容

  • 其他，不局限以上内容

• 课时 9: webpack 简易仿写

• 课时10: webpack-cli 工作流程与设计方案

• 课时10: webpack 如何进行性能分析

  • 使用webpack内置的stats

  • 速度分析：使用speed-measure-webpack-plugin

  • 体积分析：使用webpack-bundle-analyzer

  • 其他，不局限以上内容

• 课时11: webpack 部分优化方案分析

  • treeshaking/ScopeHoisting等原理

  • 体积优化

  • 其他

• 课时12: webpack 多进程方案学习

  • 进程、线程知识储备

  • 进程间通信

  • webpack4、5 多进程实现机制

  • 其他，不局限以上内容

• 课时13: webpack 缓存与预构建学习

• 课时14: webpack loader 手写

• 课时15: webpack plugin 手写

• 课时16: webpack ESlint构建方案（扩展）

  • 如何将ESLint插入webpack中校验

  • 其他，不局限以上内容