Webpack 原理淺析
阿新 • • 發佈：2020-07-29
作者： 凹凸曼 - 風魔小次郎
## 背景
`Webpack` 迭代到4.x版本後，其原始碼已經十分龐大，對各種開發場景進行了高度抽象，閱讀成本也愈發昂貴。但是為了瞭解其內部的工作原理，讓我們嘗試從一個最簡單的 webpack 配置入手，從工具設計者的角度開發一款低配版的 `Webpack`。
## 開發者視角
假設某一天，我們接到了需求，需要開發一個 `react` 單頁面應用,頁面中包含一行文字和一個按鈕，需要支援每次點選按鈕的時候讓文字發生變化。於是我們新建了一個專案，並且在 `[根目錄]/src` 下新建 JS 檔案。為了模擬 `Webpack` 追蹤模組依賴進行打包的過程，我們新建了 3 個 React 元件，並且在他們之間建立起一個簡單的依賴關係。
```jsx
// index.js 根元件
import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
ReactDom