寻觅 webpack - 30 - 终点只是另一个起点

本系列已集结成书从 0 到 Webpack：学习 Modern Web 专案的建置方式，这是一本完整介绍 Webpack 的专书，如有学习 Webpack 相关的问题可以参考此书。

这篇是这次铁人赛最後一篇文章，照惯例来说说心得吧。

webpack 是我从进入前端领域一直想要弄懂的技术，它跟我们前端工程师彷佛有个微妙的距离感，你看得见它，会稍微的了解它，但当别人问起你关於它的事时，才发现对於它的理解都只是表面的东西，你从来没有真正的认识它，像极了爱情 :) 。

webpack 虽然不像是 Vue.js 、 Bootstrap 这类的框架那麽常被使用，但他绝对会在你的前端人生中，占用了你不少的时光。藉由这次的铁人赛，我将 webpack 从头再学习了一次，尽量以初学者的角度，重新认识 webpack ，这次的旅程对我来说学习了很多，也希望读者们也有所收获。

文章总览

这里总结整个系列的各篇文章，

第一章: 认识 webpack

• JavaScript 的模组化之路: 前端工程模组化的历史发展
• 新技术的崛起: 介绍现代前端工程的新兴技术
• 介绍 webpack: webpack 各种概念介绍
• 第一次使用 webpack 就上手: 配置第一个 webpack 专案
• webpack 的配置: webpack 配置物件介绍
• 使用 CLI 操作 webpack: 如何使用 CLI 执行 webpack 建置
• 使用 Node.js API 操作 webpack: 如何使用 Node.js API 执行 webpack 建置

第二章: 配置 webpack

• 入口 Entry: 入口(entry)属性配置方法
• 输出 Output: 输出(output)属性配置方法
• 解析 Resolve: 解析(resolve)属性配置方法
• 载入器(Loaders): 载入器配置介绍
• 模组 Module 的规则判定: 模组(module)的规则属性配置方法
• 模组 Module 的处理: 模组(module)的处理属性配置方法
• 插件 Plugins: 插件(plugins)属性配置方法
• 监听 Watch: 监听模式(watch and watchOptions)属性配置方法
• Source Map: Source Map 原理介绍
• Dev Tool: devtool 属性配置方法
• 最佳化 Optimization 与模式 Mode: 最佳化(optimization)与模式(mode)属性配置方法

第三章: 真实世界的 webpack

• 建立 webpack 开发环境: 配合多种属性建立 webpack 的开发环境
• 使用 JavaScript: 在 webpack 中配置 JavaScript
• 使用 Style: 在 webpack 中配置 Style 样式表
• 使用 Image: 在 webpack 中配置图片
• 建立 webpack 生产环境 - 减小体积: 学习如何配置以减少 bundle 体积
• 建立 webpack 生产环境 - 切割代码: 学习如何切割代码输出多个 bundle
• 建立 webpack 生产环境 - 快取: 配置浏览器快取最佳化输出
• 建立 webpack 生产环境 - 分析 bundle 构成: 学习追踪 bundle 状况
• 配置多模式专案: 学习如何在同专案中多模式的配合

第四章: 解构 webpack

• 自己动手写 webpack: 理解 bundle 原理，并模仿 webpack 自己开发一个简易的打包器

推荐网站

下面是我在写文章的时候经常参考的网站:

• GitHub: webpack/webpack: webpack 代码库， examples 值得一看，对於各种情境以例子说明
• Webpack 官网: webpack 官方网站，官方文件非常丰富，但稍嫌杂乱
• SURVIVEJS — WEBPACK: 进阶的 webpack 教学书，作者为 Juho Vepsäläinen ，是 webpack 核心团队成员

GitHub Repository

本系列的 Repo 在 peterhpchen/webpack-quest ，需要使用范例代码可以从这里取用，如果对文章内容有任何问题，都欢迎发 Issue ，谢谢各位大大。

总结

这次铁人赛的结束，也只是下次旅程的开始，在 10 月 10 日的时候， webpack 5 正式发布了，带来了更好的效能、更少的配置，但是其基本概念是不变的，只要记得这系列中各个打包的核心概念，相信不管版本更新到几版，甚至 webpack 被其他更好的工具所取代，在这段时间所学的概念，绝对会一直用到。

谢谢大家跟我一起经历了一段奇幻旅程，有机会会再见的 :) 。