安装运行

# clone 项目
git clone git@github.com:darrell0904/webpack-doc.git

# 安装依赖
npm install

# 启动项目
npm run dev

 

写文档的原因

因为现在对于 webpack 的配置了解的不够全面，比较碎片话，同时有些很新的概念一直都没有应用。

这是我写这个文档原因，让自己更加系统全面的掌握 webpack ，毕竟 webpack 5.0 快要来了。

此篇文档的 webpack 的版本是 4.0

 

github 图片出不来？

• 首先打开 host 文件

sudo vi /etc/hosts

• 接着添加以下内容

# GitHub Start

192.30.253.112    github.com
192.30.253.119    gist.github.com
199.232.28.133    assets-cdn.github.com
199.232.28.133    raw.githubusercontent.com
199.232.28.133    gist.githubusercontent.com
199.232.28.133    cloud.githubusercontent.com
199.232.28.133    camo.githubusercontent.com
199.232.28.133    avatars0.githubusercontent.com
199.232.28.133    avatars1.githubusercontent.com
199.232.28.133    avatars2.githubusercontent.com
199.232.28.133    avatars3.githubusercontent.com
199.232.28.133    avatars4.githubusercontent.com
199.232.28.133    avatars5.githubusercontent.com
199.232.28.133    avatars6.githubusercontent.com
199.232.28.133    avatars7.githubusercontent.com
199.232.28.133    avatars8.githubusercontent.com

# GitHub End

• 保存，退出，重新刷新 github 页面

具体原因大家可以参考这篇文章：解决github图片不显示的问题

 

项目截图

整个文档是用 vuepress 搞得，截图如下：

 

项目文章目录

初识 Webpack

• 前端的发展
• 前端模块化
• 新框架
• 新语言
• 常见的构建工具及对比
• 安装webpack
• 一些补充

 

Webpack 核心概念

• webpack 的配置参数
• 配置 entry 和 output
• 配置 loader
• 配置 plugin
• 配置 sourceMap
• 配置 webpack-dev-derver
• 配置 HMR 热更新
• 打包 ES6 代码
• 打包 React 代码
• 一些补充

 

Webpack 高级概念

• webpack 的高级概念
• 配置 Tree Shaking
• Webpack 中的 ScopeHoisting
• Develoment 和 Production 模式的区分打包
• 显示日志和异常处理优化
• Webpack 和 Code Splitting
• 配置 SplitChunksPlugin
• 配置 Lazy Loading （懒加载）
• 打包分析 与 Preloading、Prefetching
• CSS 文件的代码分割
• Webpack 与浏览器缓存（Caching）
• Shimming 的作用
• 环境变量的使用

 

Webpack 实战配置案例

• Webpack 实战配置案例
• Library 打包
• PWA 打包
• SSR 打包
• TypeScript 打包
• webpack-dev-server 高级配置
• 配置 EsLint
• Webpack 多页面打包

 

Webpack 性能优化

• 性能优化 总览
• Webpack 优化策略
• 使用多进程打包
• 使用 DllPlugin 提高打包速度

 

编写可维护 Webpack 构建配置

• 总览
• 构建包设计与规范
• 构建包测试
• 持续集成 CI
• 发布到 npm
• git commit 及 语义化规范

 

Webpack 底层原理

• 总览
• Webpack 调试
• Webpack 启动过程分析
• Tapable 与 Webpack
• Webpack 打包流程分析
• 如何编写一个简易的 Webpack
• 如何编写一个 Loader
• 如何编写一个 Plugin

 

React、Vue框架脚手架配置分析

• Create-React-App 中 Webpack 配置
• Vue-CLI3 中 Webpack 配置

 

一些实战例子

• 一些实战例子

 

一些补充

• 代码部署

 

未完待续。。。

 

文档地址

文档地址：webpack-doc 学习文档

 

参考资料

这里列举了笔者学习 webpack 的主要来源，其余的参考资料我会再每一节发出来。

• 从基础到实战 手把手带你掌握新版Webpack4.0（慕课网）
• 玩转webpack（极客时间）
• 深入浅出 webpack（书籍）
• 使用 webpack 定制前端开发环境（掘金）