【webpack 系列】基礎篇
阿新 • • 發佈：2020-03-30
## Webpack 基礎篇
### 基本概念
`Webpack` 是一個現代 `JavaScript` 應用程式的靜態模組打包器。當 `webpack` 處理應用程式時，它會遞迴地構建一個依賴關係圖，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 `bundle`。
### 四個核心概念
1. 入口(Entry): 構建 `Webpack` 內部依賴圖的入口模組
2. 輸出(Output): 輸出 `Webpack` 打包好的 `Bundles`
3. Loader: 載入器，`Webpack` 原生只能解析 `JavaScript` 檔案，`Loader` 讓 `webpack` 擁有了載入和解析非 `JavaScript` 檔案的能力。
4. 外掛(Plugins): 擴充套件 `Webpack` 的功能，讓 `Webpack` 具有更多的靈活性。在 `Webpack` 執行的生命週期中會廣播出許多事件，`Plugin` 可以監聽這些事件，在合適的時機通過 `Webpack` 提供的 `API` 改變輸出結果。
## Webpack 基礎配置
### 初始化專案
新建一個資料夾 `webpack-demo`，在該目錄中使用 `npm init -y` 進行專案初始化。
```
mkdir webpack-demo && cd webpack-demo
npm init -y
```
執行以下命令安裝最新版本或特定版本
```
npm i -D webpack
npm i -D