static/

static/ 也是用來放置靜態資源，但與 assets/ 最大的不同在於 static/ 下的檔案完全不會經過 webpack 壓縮。

讓我們來做的小實驗，同時在 assets/ 及 static/ 裡放置 harden-test.jpg 這個檔案，再執行 npm run build，接著查看 dist/ 資料夾就會發現圖片打包後檔案位置的差異。

├── dist/
│    ├── static/
│    │    ├── css/
│    │    │    ├── ...
│    │    ├── img/
│    │    │    ├── harden.4df69f6.jpg    # 放在 assets/ 被打包後的圖檔
│    │    ├── js/
│    │    │    ├── ...
│    │    ├── harden.jpg                 # 放在 static/ 未被打包的圖檔
│    └── index.html

如果 static/ img/ 下沒出現所置入的圖片，那是因為 webpack 預設當圖片小於 10kb 時，就會壓成 base-64 格式直接嵌在程式碼裡，就不會出現在 static/ img/ 下。

一樣需要注意的是，任何放在 static/ 中的檔案引入時都要使用絕對路徑/static/[filename]，更多可參閱 Handling Static Assets。