因为网页应用程序不断扩大、开发模式慢慢地被模组化设计取代，近期诞生了 Webpack，它可以在 JavaScript 生态系中，作为一个高度整合且完整之建置工具，优化程序的效能。
我在培训营时，也有接触到 Webpack，但其中运作原理并不是非常理解，随着步入职场，因应工作需求，自行进修後将学习到的用简单图文方式纪录於此，与大家分享。
| 阶段 1 | 阶段 2 | 阶段 3 |
|---|---|---|
| 来源(Entry) | 处理(Mode) | 输出(Output) |
系所有资源的起始点，运作原理是以 Entry 这个模组的相依关系，解析出整个应用程序的相依关系图。
经过上一阶段「来源(Entry)」的运作，会在此时进行所有资源对应之处理。而其最佳化设定会依 Mode 属性而有所不同。Mode 属性有 production、development与none三种，主要是目标环境的不同。
有来源自然就会有输出。在第一阶段我们告诉 Entry 模组的相依性，经过第二阶段处理後，在这个最後阶段，设定输出的位置与方式。
以上参考资源如果大家有兴趣，推荐先看「从0到Webpack」系列文章或支持作者书籍，再看「Webpack5 快速入门」之影片教学实做一次，会更理解运作原理！
总结此篇文章，其实大家可以将 Webpack 视为现代 JavaScript 应用程序的模组綑绑器，所有资源进到 Webpack 中都会变成模组，在建置过程中的各个阶段会以特定方式进行处理，最後输出结果。
本文同步发布於我的个人网站 Annie Code Life
今天要记录的是Stream，当我在研读这个部分时，发现我的参考书介绍的比较简略一点，但实际查资料也发...
在11sp12仍然有个问题，在代理商这边始终无法解决 因此又自行新增按钮来处理问题 1.在表单Act...
前言 回过头看，props 太太太重要了，决定为它独立一篇 Props 透过它我们才能从父元件传递资...
会话劫持经常通过XSS（跨站点脚本）或嗅探发生。这个问题主要集中在中间人的嗅探上。输入验证可防止攻击...
什麽是AutoML 根据 Microsoft的说法节录如下： 自动化机器学习 (亦称为自动化 ML ...