KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

play-webpack

★ 39 Open GitHub ↗

全面解析 webpack 核心功能和优化策略，源码分析

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 玩转 webpack

全方面解析 webpack 核心功能和优化策略，后面会持续更新源码解析等等

## webpack 核心概念

1. [webpack 核心概念之 entry/output](https://github.com/ravencrown/play-webpack/issues/1)
2. [webpack 核心概念之 loader/plugin](https://github.com/ravencrown/play-webpack/issues/2)
3. [webpack 核心概念之 mode](https://github.com/ravencrown/play-webpack/issues/3)

## webpack 基础用法

1. [webpack 基础用法之 ES6 解析](https://github.com/ravencrown/play-webpack/issues/4)
2. [webpack 基础用法之 JSX 解析](https://github.com/ravencrown/play-webpack/issues/5)
3. [webpack 基础用法之 CSS 解析](https://github.com/ravencrown/play-webpack/issues/6)
4. [webpack 基础用法之 图片解析](https://github.com/ravencrown/play-webpack/issues/7)
5. [webpack 基础用法之 字体解析](https://github.com/ravencrown/play-webpack/issues/8)
6. [webpack 基础用法之 资源解析](https://github.com/ravencrown/play-webpack/issues/9)
7. [webpack 基础用法之 文件监听和热更新](https://github.com/ravencrown/play-webpack/issues/10)
8. [webpack 基础用法之 文件指纹](https://github.com/ravencrown/play-webpack/issues/11)
9. [webpack 基础用法之 HTML/CSS/JS 压缩](https://github.com/ravencrown/play-webpack/issues/12)

## webpack 进阶用法

1. [webpack 进阶用法之 自动清理构建目录产物](https://github.com/ravencrown/play-webpack/issues/13)
2. [webpack 进阶用法之 PostCSS 插件 autoprefixer 自动补齐 css3前缀](https://github.com/ravencrown/play-webpack/issues/14)
3. [webpack 进阶用法之 移动端 CSS px 自动转化成 rem](https://github.com/ravencrown/play-webpack/issues/15)
4. [webpack 进阶用法之 静态资源内联](https://github.com/ravencrown/play-webpack/issues/16)
5. [webpack 进阶用法之 多页面（MPA）应用打包方案](https://github.com/ravencrown/play-webpack/issues/17)
6. [webpack 进阶用法之 source map 使用](https://github.com/ravencrown/play-webpack/issues/18)
7. [webpack 进阶用法之 提取公共资源](https://github.com/ravencrown/play-webpack/issues/19)
8. [webpack 进阶用法之 tree-shaking](https://github.com/ravencrown/play-webpack/issues/20)
9. [webpack 进阶用法之 Scope Hoisting](https://github.com/ravencrown/play-webpack/issues/21)
10. [webpack 进阶用法之 代码分割和动态import](https://github.com/ravencrown/play-webpack/issues/22)
11. [webpack 进阶用法之 和ESLint 结合](https://github.com/ravencrown/play-webpack/issues/23)
12. [webpack 进阶用法之 优化构建时命令行的显示日志](https://github.com/ravencrown/play-webpack/issues/24)
13. [webpack 进阶用法之 构建异常和中断处理](https://github.com/ravencrown/play-webpack/issues/25)

## webpack 优化策略

1. 速度分析
2. 体积分析 
3. 多进程/多实例 构建
4. 多进程并行压缩代码
5. 使用 exterals 分离基础包
6. 利用缓存提升二次构建速度
7. 缩小构建目标
8. 使用 Tree-shaking 擦除无用的 JS 和 CSS
9. 使用动态 Polyfill
10. 使用 webpack 进行图片压缩

## webpack 源码分析

1. webpack 的本质和 Tapable 介绍
2. Tapable 中的 Sync* 类型的钩子
3. Tapable 中的 Async* 类型的钩子
4. webpack 事件流
5. compile 和 compilation 对象介绍
6. 编译和构建主流程
7. 通过 emit 输出构建资源到 Path
8. 写一个简易的 webpack

## 编写 loader 和插件

1. loader 的执行顺序
2. loader 匹配文件的可选方式
3. 写一个自动合成雪碧图的loader
4. 写一个压缩构建资源为 zip 包的插件

### [强烈推荐极客时间的这个视频 - 玩转webpack](https://time.geekbang.org/course/intro/190)

play-webpack

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README