# laravel mix相關
https://hackmd.io/@javck/ByJgF8HRP/%2Ftv5xNJ_ASn6acZuJmiboZw

## 使用tw css
https://laracasts.com/series/laravel-6-from-scratch/episodes/55

## helper function

引入要用
src="mix()"

因為編譯都會有對應的亂碼
除非你要這樣引入
不然用mix就比較好

你可以在網頁上面 看原始碼
看他src是不是雜湊

有點像webpack裡面那個雜湊
讓他知道每次都不一樣
以防萬一 都覺得沒改動

## 運行 Mix
Mix是一個最高層的Webpack設定層，所以要跑你的Mix工作只需要去執行某一個被包含在預設Laravel裡的package.json檔內的NPM腳本

//執行所有Mix
npm run dev

//執行所有Mix並將輸入檔進行壓縮
npm run production

//觀察資源檔的變化
npm run watch

以上指令將會不斷的在你的Terminal執行，並追蹤關聯檔案的變化。一旦出現改變，Webpack將會自動的重新編譯資源檔。

在某些環境，當關聯檔案變化卻不會自動編譯。在這個情況發生時，可以改用watch-poll命令。

`npm run watch-poll`

## 處理一般的樣式表
假如你想要把多個一般樣式表壓縮成單檔，你可以使用styles()，如下例所示將vendor資料夾的normalize.css和videojs.css壓縮後生成public/css/all.css。

//webpack.mix.js
mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

## 處理一般的 js 檔案

假如你想要把多個js檔案壓縮成單檔，你可以使用scripts()，如下例所示將public/js資料夾的admin.js和dashboard.js壓縮後生成public/js/all.js。

//webpack.mix.js
mix.scripts([
    'public/js/admin.js',
    'public/js/dashboard.js'
], 'public/js/all.js');

## 複製圖片或一般檔案
copy()用於複製檔案和資料夾到新的位置去。這在處理特定位於node_modules資料夾的資源，將之重新放至於public資料夾時非常有用。如下例：

//webpack.mix.js
mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');

當需要複製一個資料夾，copy()將會移除該資料夾的深層結構。如需保存其深層結構，只需要改用copyDirectory()即可，如下例：

//webpack.mix.js
mix.copyDirectory('resources/img', 'public/img');

## 有辦法關掉 Mix 的 popup 通知嗎?
預設Mix會在打包完成之後在螢幕的右上方跳出一個popup視窗告訴你作業是否成功，如果需要關閉可以輸入以下程式：

//webpack.mix.js
mix.disableNotifications();

## trait()
https://laracasts.com/series/laravel-from-scratch-2018/episodes/34
供應商提取
將所有特定於應用程序的 JavaScript 與您的供應商庫（例如 React 和 Vue）捆綁在一起的一個潛在缺點是，它會使長期緩存變得更加困難。例如，對應用程序代碼的一次更新將迫使瀏覽器重新下載所有供應商庫，即使它們沒有更改。

如果您打算頻繁更新應用程序的 JavaScript，您應該考慮將所有供應商庫提取到它們自己的文件中。這樣，對應用程序代碼的更改不會影響大vendor.js文件的緩存。Mix 的extract方法使這變得輕而易舉：

mix.js('resources/js/app.js', 'public/js')
    .extract(['vue'])

該extract方法接受您希望提取到vendor.js文件中的所有庫或模塊的數組。以上面的代碼片段為例，Mix 將生成以下文件：

public/js/manifest.js：Webpack 清單運行時
public/js/vendor.js：您的供應商庫
public/js/app.js：您的應用程序代碼
為避免 JavaScript 錯誤，請確保按正確順序加載這些文件：

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

## PostCSS 插件
https://hackmd.io/RS39F8w0S9q_9-vRuW-9DA
原本就包含了
###### tags: `Laravel`