webpack轉換vite使用心得

 最近把公司專案從webpack4搬到vite上，所以研究了一下，只能說我非常喜歡vite的風格，不像webpack有一大堆看不懂的設定跟一堆plugin，設定起來非常快速跟方便。

不過兩之間還是有一定的差距，不可能只搬打包工具而程式碼不動，這裡就列出幾個會有影響的程式碼

require
vite是不支援require的，就算裝了套件vite-plutin-require，require進來的也只會有路徑而已，但svg可以透過vite-plugin-svgr把require進來的東西轉成component，但如果要做到dynamic import也只能透過異步加載(loadable)的方式來處理

process.env
在webpack可以用這種寫法將環境變數注入到程式碼中，vite當然也可以，但寫法不同，是用import.meta.env，如果不想改寫法，可以在vite.config.js裡面設定define把process.env.API_HOST: 127.0.0.1之類的，讓vite專案也看得懂process.env.XXXX
ps. 如果使用import.meta.env記得要將環境變數以VITE_開頭才讀取得到喔

static public資料夾
webpack好像不特別設定是不會打包靜態資料夾的，可以進行另外處理，但在vite有個publicDir，預設為public，在打包時就會把public裡面的東西打包進目標資料夾的根目錄，例如/public/image => /dist/image
如果不想打包可以設為false

image
在專案中如果是css設定background-image: url(...)，vite會自動判斷最終這張圖片是否是存在靜態資料夾，如果不是則是會被打包成圖片檔+hash的檔名，等於把路徑寫在css裡，路徑跟圖片是會被強迫編譯的，這點跟webpack就不一樣，少了一點彈性，沒辦法拿來做文章。
如果在html裡，<img src="/image/logo.png"/>則不會被編譯，當然如果你網址是指到你的根目錄這完全不會有任何問題，但如果你的網址有前綴，例如https://test.com/web/xxxxx，這樣/image/logo.png就會找不到圖片，因為圖片在/web/image/logo.png，所以解決方式是使用import logo from "/public/image/logo.png"
<img src={logo} />
這樣打包完src就會被編譯成/web/image/logo.png

如果像上述情況有前綴，在vite.config.js裡面有個base: "/web"，這樣所有的引入都會加上前綴/web

我有試過官方提供new URL("image path").href，在固定路徑的情況下可以，但如果是dynamic path就會變成undefined，試了好幾次也沒辦法，只好放棄

曾經我有試過require("image path")的方式把引入變成路徑，一開始有成功，但重開專案之後又失敗了，也是很神奇的一次經驗。

大致上遇到要調整的就這些，只能說vite真的是很神，設定簡單，也不用裝一堆外掛，編譯速度又快

之後有空也可以pwa的部分