Day27：【技术篇】Webpack5 - Webpack 之运作流程

一、前言

  搭配上一篇文章有提到 Webpack 之运作阶段，接下来需要了解在每个阶段又是如何运作的。

二、Webpack 之运作三阶段

三、Webpack 之运作流程

1. 启动 Webpack(mode)

 执行 Mode 对应的最佳化方案。

2. 找到入口(entry)

 找到起始模组的入口。

3. 建构相依图(dependency graph)

 又拆分为解析模组(loaders)与搜寻下层依赖模组。找到依赖模组後，回上一步解析模组，没有下层即结束搜寻。

4. 建置(bundle)

5. 输出(output)

6. 上述每一步骤都有事件钩子(hooks)，plugins 可以在这些事件钩子(hooks)上注册各种处理函式，在执行时触发其设定的工作。

四、结论与自我鼓励

• 参考书籍：从0到Webpack

  应该有越学越有趣了吧？我的文章较偏初浅，希望和我一样靠自学也能有定期的帮助～後面再加深学习就会更有动力与认知唷！

本文同步发布於我的个人网站 Annie Code Life