Webpack源码专精

课程详情

课程目录

1.AST、Babel、依赖
  1-0.pptx
  1-0.txt
  1-1 babel与AST
  1-2 把let变成var
  1-3 将代码转化为ES5
  1-4 分析index.js的依赖
  1-5 递归地分析嵌套依赖
  1-6 静态分析循环依赖
  课后测试.docx
2.Webpack核心原理
  2-1 webpack 要解决的两个问题
  2-2 编译 import 和 export 关键字
  2-3 把多个文件打包成一个
  2-4 最终文件长什么样子
  2-5 打包器完成
3.Loader原理
  3-1 如何加载 CSS 文件
  3-2 创建 CSS loader
  3-3 发现打包器的问题
  3-4 阅读style-loader源码理解 webpack
  3-5 raw-loader和css-loader源码赏析
  3-6 loader 面试题
4.阅读Webpack源码前的准备
  3 第三种调试方式 yarn link
  4 其他准备工作
  4-1 课程优势
  4-2 两种调试 webpack-cli 的方法
5.逐行于都Webpack源码（上）
  1 分析 webpack-cli 是如何调用 webpack 的
  2 创建编译器 Compiler 的过程
  3 Tapable 是什么
  4 分析 Webpack 的整体流程
  5 Webpack 是如何处理 Entry 的
  6 你怎么知道 facotery 就是 nmf 呢？
  文章.doc
6.逐行阅读Webpack源码（下）
  1 回顾上节课
  2 factory.create 与 module
  3 _source 与 _ast
  4 Webpack 借助 acorn 的 parser 分析 JS
  5 如何用目前的知识在面试官面前装X
  6 Webpack 分析 JS 的过程
  7 Webpack 整体流程复述
  8 你可以看懂别人写的博客了
7.Webpack插件原理
  1 Webpack Plugin 工作机制
  2 插件 1 源码讲解
  3 插件 2 源码讲解
  4 插件 3 源码讲解
  5 loader vs plugin 区别
  6 如何自己写 plugin
  7 看看网上的相关文章
8.Webpack高级配置举例（1）
  1 如何使用课程中的代码
  2 让webpack输出的代码支持IE
  3 用babel-loader打包JS
  4 用babel-loader打包JSX
  5 给webpack配置ESLint插件
  6 用babel-loader打包TypeScript
  7 让ESLint支持TypeScript
  8 用babel-loader打包TSX
  9 科普：CRLF是什么
  10 让JS和TS支持@alias
  11 问答：webpack应学到什么程度
  12 建议：使用src代替@
9.Webpack高级配置举例（2）
  1 让 webpack 支持 SCSS
  2 SCSS 自动 import 全局文件
  3 SCSS 分享变量给 JS
  4 让 Webpack 支持 LESS 文件
  5 LESS 自动引入全局文件
  6 LESS 分享变量给 JS
  7 对比 SCSS 和 LESS
  8 支持 Stylus 文件
  9 Webpack config 重构
  10 在生产环境提取单独的CSS文件
  11 自动生成HTML页面
10.Webpack高级配置举例（3）
  1 Webpack 优化之单独打包 runtime
  2 为什么要单独打包 runtime
  3 Webpack 优化之用 splitChunks 将 node 依赖单独打包
  4 Webpack 优化之固定 moduleIds（不重要）
  5 Webpack 多页面
  6 Webpack 优化之 common 插件
  7 无限多页面的实现思路
Webpack源码.jpg