15. 使用 Laravel Mix 來管理前端資源

1. 由於接下來我們可能會用到一些javascript或CSS等前端資源，因此，我們可以使用 Laravel Mix 來管理前端資源。
2. Laravel Mix 一款前端任務自動化管理工具，讓你能夠為你的 Laravel 應用定義 Webpack 編譯任務， 支持許多常見的 CSS 與 JavaScript 預處理器，可以輕鬆地管理前端資源。
3. 在開始使用 Mix 之前，必須先確保你的機器上安裝了 Node.js 和 NPM。

   node -v
   npm -v

   安裝 Laravel Mix 及相關依賴

   npm install

    

4. 接著順便安裝Yarn套件管理器（比npm更快的JavaScript 套件版本管理工具），請從這裡下載安裝：https://yarnpkg.com/zh-Hant/docs/install#windows-stable
5. 接著，就可以使用 Yarn 來安裝依賴：

   yarn install --no-bin-links

     -no-bin-links只有在windows下才需要，就是在 npm install 時不要建立軟連結，避免在 ntfs 上運行 npm install 時會遇到的建立軟連結失敗的情況。

6.  然後我們還需要修改一下 Mix 的設定檔webpack.mix.js：

   mix.js('resources/js/app.js', 'public/js')
       .sass('resources/sass/app.scss', 'public/css')
       .version();

   在最後加了一個 version()，使 Mix 每次生成的靜態文件後面加上一個類似版本號的參數，避免被瀏覽器快取，而老是讀到錯誤的舊檔案。
7. 最後，執行以下命令即可：

   npm run watch-poll

   watch-poll 會在終端裡一直運行，監控 resources 檔案夾下的資源檔案是否有發生改變。在 watch-poll 命令運行的情況下，一旦資源檔案發生變化，Webpack 會自動重新編譯。

8. 如果都出現錯誤訊息，請先刪除 node_modules 目錄，然後按以下方式解決：

   npm cache clean --force 
   npm install 
   npm run dev 

    

9. 注意：在開發過程中，我們需要保證 npm run watch-poll 一直處在執行狀態中，如果不想佔用VSCode的終端機，可以用PowerShell來執行之。正常運行的畫面看起來像這樣：