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中校验

    • 其他，不局限以上内容

Previous工程构建Next01-webpack概述及背景

Last updated