摘要：原文地址鏡像地址中文文檔概覽基本示例是位于頂層的一個簡潔的配置層，在的情況下使用會使操作變的非常簡單。在項目根目錄下并沒有配置文件，默認指向根目錄下的配置文件。否則，它通常與需要刪除的錯誤鎖文件有關。該問題已被在修復。

原文地址: Laravel Mix Docs

鏡像地址 : Laravel-mix 3.0 中文文檔

larave-mix 是位于webpack頂層的一個簡潔的配置層，在 80% 的情況下使用 laravel mix 會使操作變的非常簡單。盡管 webpack 非常的強大，但大部分人都認為 webpack 的學習成本非常高。但是如果你不必用再擔心這些了呢？

看一下基本的 webpack.mix.js 文件，讓我們想象一下我們現在只需要編譯javascript(ES6)和sass文件：

let mix = require("laravel-mix");

mix.sass("src/app.sass", "dist")
   .js("src/app.js", "dist");

怎么樣，簡單嗎？

　　1. 編譯sass文件, ./src/app.sass 到 ./dist/app.css
　　2. 打包在 ./src/app.js 的所有js(包括任何依賴)到 ./dist/app.js。

使用這個配置文件，可以在命令行觸發webpack指令：node_modules/bin/webpack

在開發模式下，并不需要壓縮輸出文件，如果在執行 webpack 的時候加上環境變量：export NODE_ENV=production && webpack,文件會自動壓縮

但是如果你更喜歡使用Less而不是Sass呢？沒問題，只要把 mix.sass() 換成 mix.less()就OK了。

使用laravel-mix，你會使發現大部分webpack任務會變得更又把握

盡管 laravel-mix 對于laravel使用來說最優的，但也能被用于其他任何應用。

laravel已經包含了你所需要的一切，簡易步驟：

　　1. 安裝 laravel

　　2. 運行 npm install?

　　3. 查看 webpack.mix.js 文件 ，就可以開始使用了.

你可以在命令行運行 npm run watch 來監視你的前段資源改變，然后重新編譯。

在項目根目錄下并沒有 webpack.config.js 配置文件，laravel默認指向根目錄下的配置文件。如果你需要自己配置它，你可以把它拷貝到根目錄下，同時修改 package.json 里的npm腳本：?cp node_modules/laravel-mix/setup/webpack.config.js ./.

首先使用npm或者yarn安裝laravel-mix，然后把示例配置文件復制到項目根目錄下

mkdir my-app && cd my-app
npm init -y
npm install laravel-mix --save-dev
cp -r node_modules/laravel-mix/setup/webpack.mix.js ./

現在你會有如下的目錄結構

node_modules/
package.json
webpack.mix.js

webpack.mix.js 是你在webpack上層的配置文件，大部分時間你需要修改的是這個文件

首先看下 webpack.mix.js 文件

let mix = require("laravel-mix");

mix.js("src/app.js", "dist")
   .sass("src/app.scss", "dist")
   .setPublicPath("dist");

注意源文件的路徑，然后創建匹配的目錄結構(你也可以改成你喜歡的結構)。現在都準備好了，在命令行運行 node_modules/.bin/webpack 編譯所有文件，然后你將會看到：

dist/app.css

dist/app.js

dist/mix-manifest.json(你的asset輸出文件，稍后討論)

干得漂亮！現在可以干活了。

把下面的npm腳本添加到你的 package.json 文件中可以加速你的工作操作.，laravel安裝的時候已經包含了這個東西了

"scripts": {
    "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  }

我們先回顧一下通用的工作流程以便你能在自己的項目上采用

1 . 安裝laravel

laravel new my-app

2 . 安裝Node依賴

npm install

3 . 配置 webpack.mix.js

這個文件所有前端資源編譯的入口

let mix = require("laravel-mix");

mix.js("resources/assets/js/app.js", "public/js");
mix.sass("resources/assets/sass/app.scss", "public/css");

默認會啟用 JavaScript ES2017 + 模塊綁定，就行sass編譯一樣。

4 . 編譯

用如下指令編譯

node_modules/.bin/webpack

也可以使用package.json 里的npm腳本：

npm run dev

然后會看到編譯好的文件：

./public/js/app.js

./public/css/app.css

監視前端資源更改：

npm run watch

laravel自帶了一個 ./resources/assets/js/components/Example.vue 文件，運行完成后會有一個系統通知。

5 . 更新視圖

laravel自帶一個歡迎頁面，我們可以用這個來做示例，修改一下：

刷新頁面，干得漂亮！

不，在laravel下使用使最好的，但也可以用在別的任何項目

只有在node環境變量為生產環境時才會被壓縮，這樣會加速編譯過程，但在開發過程中是不必要的，下面是在生成環境下運行webpack的示例

export NODE_ENV=production && webpack --progress --hide-modules

強烈推薦你把下面的npm腳本添加到你的package.json文件中，注意laravel已經包括了這些了

"scripts": {
    "dev": "NODE_ENV=development webpack --progress --hide-modules",
    "watch": "NODE_ENV=development webpack --watch --progress --hide-modules",
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot",
    "production": "NODE_ENV=production webpack --progress --hide-modules"
},

如果你在VM下執行 npm run dev，你會發現 webpack 并不能監視到你的文件改變。如果這樣的話，有兩種方式來解決這個

配置 webpack 檢測文件系統的變化, 注意:檢測文件系統是資源密集型操作并且很耗費電池的使用時長.

轉發文件通過使用類似于 vagrant-fsnotify 之類的東西將通知發送給VM。注意，這是一個 只有 Vagrant 才有的插件。

檢測 VM 文件系統變化, 修改一下你的 npm 腳本，使用 --watch-poll 和 --watch 標簽，像這樣：

"scripts": {
    "watch": "NODE_ENV=development webpack --watch --watch-poll",
}

推送文件改動到 VM, 在主機安裝 vagrant-fsnotify

vagrant plugin install vagrant-fsnotify

現在你可以配置 vargrant 來使用這個插件, 在 Homestead 中, 在你的 Homestead.yaml 文件類似于這樣

folders:
    -
        map: /Users/jeffrey/Code/laravel
        to: /home/vagrant/Code/laravel
        options:
            fsnotify: true
            exclude:
                - node_modules
                - vendor

一旦你的 vagrant 機器啟動, 只需要在主機上運行 vagrant fsnotify 把文件的改動推送到 vm 上, 然后在 vm 內部運行 npm run watch 就能夠檢測到文件的改動了.

如果你還是有問題，去這兒溜達溜達吧。

你可能用的是相對路徑，但是在你的 resources/assets/sass/app.css 里并不存在：

body {
    background: url("../img/example.jpg");
}

當引用相對路徑的時候，會根據當前文件的路徑來搜索，同樣的，webpack會首先搜索 `resources/assets/img/example.jpg ，如果找不到，會繼續搜索文件位置，包括node_modules,如果還找不到，就報錯：

ERROR  Failed to compile with 1 errors

This dependency was not found in node_modules:

有兩個解決辦法：

1 . 讓 resources/assets/img/example.jpg 存在這個文件.

2 . 編譯 css 的時候添加下面的選項，禁用css的url處理：

mix.sass("resources/assets/sass/app.scss", "public/css")
   .options({
        processCssUrls: false
   });

他對老項目特別有用，因為你的文件夾結構已經完全創建好了。

如果你沒有使用 laravel，你的 mix-manifest.json 文件會被放到項目根目錄下，如果你不喜歡的話，可以調用 mix.setPublicPath("dist/")，然后manifest文件就會被放到dist目錄下。

webpack 使用 ProvidePlugin 插件加載一些需要的模塊，常用的一個例子就是加載 jQuery：

new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery"
});

// in a module
$("#item"); // <= just works
jQuery("#item"); // <= just works
// $ is automatically set to the exports of module "jquery"

當laravel-mix自動加載模塊的時候(像上面說的那樣)，你如果想禁用(傳一個空對象)或者用你自己的模塊覆蓋它，可以調用 mix.autoload() 方法：

mix.autoload({
  jquery: ["$", "window.jQuery", "jQuery"], // more than one
  moment: "moment" // only one
});

如果, 更新你的依賴, 你有以下編譯失敗的信息

Module build failed: Error:

Vue packages version mismatch:

* vue@2.5.13
* vue-template-compiler@2.5.15

這意味著你的 vue 和 vue-template-compiler 依賴不同步, 每一個 Vue 的更新, 版本號必須是相同的. 更新來修復這個錯誤

npm update vue

// or

npm install vue@2.5.15

不幸的是，你的依賴項可能沒有正確安裝的原因有無數個。一個常見的根本原因是安裝了老版本的Node(node -v) 和 npm (npm -v)。第一步，訪問 http://nodejs.org 并更新它們。

否則，它通常與需要刪除的錯誤鎖文件有關。讓這一系列命令嘗試從頭開始安裝一切

rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
npm install

如果你遇到這樣的失敗信息……

These dependencies were not found:

* /Users/you/Sites/folder/resources/assets/js/app.js

... 你可能使用 npm 5.2 (npm -v) 這個版本。這個版本引入了一個導致安裝錯誤的錯誤。該問題已被在 npm 5.3 修復。請升級，然后重新安裝

rm -rf node_modules
rm package-lock.json yarn.lock
npm cache clear --force
npm install

mix.js(src|[src], output)

簡單的一行代碼，larave mix可以執行很多重要的操作

ES2017+ 模塊編譯

創建并且編譯vue組件(通過 vue-loader)

模塊熱替換(HMR)

Tree-shaking打包技術，webpack2里新增的(移除無用的庫)

提取和拆分 vendor 庫(通過mix.extract()方法), 使長期緩存變的容易

自動版本化(文件哈希)，通過 mix.version()

let mix = require("laravel-mix");

// 1. A single src and output path.
mix.js("src/app.js", "dist/app.js");


// 2. For additional src files that should be
// bundled together:
mix.js([
    "src/app.js",
    "src/another.js"
], "dist/app.js");


// 3. For multiple entry/output points:
mix.js("src/app.js", "dist/")
   .js("src/forum.js", "dist/");

考慮到典型的laravel默認安裝的時候會把入口定位在 ./resources/assets/js/app.js，所以我們先準備一個 webpack.mix.js 把 app.js 編譯到 ./public/js/app.js。

let mix = require("laravel-mix");

mix.js("resources/assets/js/app.js", "public/js");

現在上面所有的項你都可以用了，只需要調用一個方法。

在命令行調用 npm run dev 執行編譯。

laravel mix 包羅萬象，支持vue組件編譯，如果你不使用vue的話，可以忽略這塊。

單文件組件是vue最重要的特征。在一個文件里為一個組件定義模板，腳本，樣式表。

./resources/assets/js/app.js

import Vue from "vue";
import Notification from "./components/Notification.vue"; 

new Vue({
    el: "#app",
    components: { Notification }
});

在上面，我們導入了vue(首先你需要執行npm install vue --save-dev安裝vue)，然后引入了一個叫 Notification 的vue組件并且注冊了 root vue 實例。

./resources/asset/js/components/Notification.vue

如果你了解vue，這些你都會很熟悉，繼續。

./webpack.mix.js

let mix = require("laravel-mix");

mix.js("resources/assets/js/app.js", "public/js");

執行 npm run dev 編譯文件，這樣就簡單的創建了一個HTML文件，引入 ./js/app.js 文件，然后在瀏覽器里查看吧！

laravel mix 也裝載了基本的react支持，只要把mix.js()改成mix.react()并且使用相同的參數。在底層，mix會引用react需要的任何babel插件。

mix.react("resources/assets/js/app.jsx", "public/js/app.js");

當然，你仍然需要使用npm安裝react和reactDOM，不過要注意小心行事。

mix.js(src, output)
   .extract(["any", "vendor", "library"]);

把所有的js都打包成一個文件會伴隨著潛在的風險：每次更新項目中就算很小的一部分都需要破壞所有用戶的緩存，這意味著你的第三方庫需要重新被下載和緩存。這樣很不好。

一個解決的辦法是分離或者提取你的庫文件。

應用代碼： app.js

vendor庫： vendor.js

Manifest(webpack runtime):?manifest.js

mix.extract(["vue", "jquery"]);

extract方法接受一個你想要從打包文件里提取出的庫的數組，使用這個方法，Vue和jQuery的源代碼都會被放在vendor.js里。如果在未來你需要對應用代碼做一些微小的變動，并不會對大的vendor庫產生影響，它們依然會留在長期緩存。

一旦執行webpack打包文件，你會發現三個新的文件，你可以在HTML頁面引用它們。

實際上，我們付出了一些HTTP請求的代價（就是會多請求幾次）來換取長期緩存的提升。

Manifest文件是什么

webpack編譯的時候會有一些 run-time 代碼協助其工作。如果沒有使用 mix.extract()，這些代碼你是看不到的，它會在打包文件里，然而，如果我們分離了代碼并且允許長期緩存，在某些地方就需要這些 run-time 代碼，所以，mix會把它提取出來，這樣一來，vendor 庫和 manifest 文件都會被緩存很長時間。

mix.browserSync("my-site.test");

BrowserSync 能自動監控文件變動并且把你的變化通知瀏覽器, -- 完全不需要手動刷新。你可以調用 mix.browserSync() 方法來開啟這個功能：

mix.browserSync("my-domain.test");

// Or:

// https://browsersync.io/docs/options/
mix.browserSync({
    proxy: "my-domain.test"
})

參數可以傳字符串(proxy)，也可以傳對象(BrowserSync 設置)。你聲明的域名作為 proxy 是非常重要的，Browsersync 將通過代理網址來輸出到你的虛擬主機(webpack dev server).

其他選項可以從 Browsersync Documentation

現在, 啟動 dev server (npm run watch), 并進行下一步操作吧.

laravel mix對模塊熱替換提供了無縫的支持。

模塊熱替換(或者叫熱加載)，意思就是當 javascript 改變刷新頁面的時候可以維持組件的狀態，例如現在有一個計數器，按一下按鈕，計數器會加1，想象一下你點了很多次然后修改一下組件的相關文件，瀏覽器會實時的反映出你所做出的更改而保持計數器不變，計數器不會被重置，這就是熱加載的意義最在。

在laravel里的用法

Laravel 和 Laravel 一起工作, 來抽象出熱加載的復雜性.

看一下 laravel 里的 package.json 文件，在 scripts 模塊，你可以看到：

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
    "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules",
    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
    "production": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}

注意一下 hot 選項，這個地方就是你所需要的，在命令行執行npm run hot會啟動一個node服務器并且監視你的bundle文件，接下來，在瀏覽器打開你的laravel應用，一般應該是 http://my-app.test。

在laravel應用里使用熱加載很重要的一點是要保證所有的腳本資源引用的是前面啟動的node服務器的url：http://localhost:8080，現在你可以手動更新你的HTMLBlade文件了:

    
...
    

假設你有一些組件，嘗試在瀏覽器里更改他們的狀態，然后更新他們的模板文件，你可以看到瀏覽器會立刻反應出你的更新，但是狀態并沒有被改變。

但是，在開發部署環境下手動更新url會是一個負擔，所以，laravel提供了一個mix()方法，他會動態的構建js或者樣式表的引用，然后輸出。上面的代碼因此可以修改成：

調整之后，Laravel 將為你做這項工作。如果運行 npm run hot 以啟用熱重加載，則該函數將設置必要的 http://localhost:8080 作為 URL。相反，如果您使用 npm run dev 或 npm run pro，它將使用域名作為基準 url。

在Https 中使用
如果你在 HTTPS 連接上開發你的應用，你的熱重加載腳本和樣式也必須通過HTTPS服務。要實現這一點，可以將 -—https 標志添加到 package.json 中的熱選項命令中。

"scripts": {
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --https",
}

通過上面的設置，webpack-dev-server 將會生成一個自簽名證書。如果你希望使用自己的證書，可以使用以下設置:

 "hot": "NODE_ENV=development webpack-dev-server --inline --hot --https --key /path/to/server.key --cert /path/to/server.crt --cacert /path/to/ca.pem",

現在在你的 Html/Blade 文件中可以使用

或者

在spa里的用法

laravel mix包含了流行的 vue-loader 包，這意味著，如果是單頁應用，你什么都不需要做，它是開箱即用的。

mix.js("src", "output")
   .version([]);

為了幫助長期緩存，Laravel Mix 提供了 mix.version() 方法，它支持文件散列。比如app.js?id=8e5c48eadbfdd5458ec6。這對清除緩存很有用。假設你的服務器自動緩存了一年的腳本，以提高性能。這很好，但是，每當您對應用程序代碼進行更改時，需要一些方法來告訴用戶更新緩存, 這通常是通過使用查詢字符串或文件哈希來完成的。

啟用了版本控制之后，每次代碼更改時，都會生成一個新的散列查詢字符串文件。看以下webpack.mix.js 文件

編譯后，你會在 mix-manifest.json 文件看到 /css/app.css?id=5ee7141a759a5fb7377a 和 /js/app.js?id=0441ad4f65d54589aea5。當然，你的特定散列將是唯一的。每當你調整 JavaScript 時，編譯后的文件將會收到一個新的散列名稱，這將有效地破壞緩存，一旦被推到生產環境中。

舉個例子，試試 webpack --watch，然后修改一下你的 JavaScript。你將立即看到一個新生成的打包文件和樣式表。

這就引出了一個問題:如果名稱不斷變化，我們如何將這些版本化的腳本和樣式表包含到HTML中呢?是的，這很棘手。答案將取決于你構建的應用程序的類型。對于SPA，你可以動態地讀取 Laravel Mix生成的 manifest.json 文件，提取資料文件名(這些名稱將被更新，以反映新的版本文件)，然后生成HTML。

Laravel 用戶

對于 Laravel 項目，一個解決方案是開箱即用的。只需調用全局 mix() 函數，就完成了!我們將計算出導入的適當文件名。這里有一個例子:

    
        
        
        
    
    
        

            
Hello World
        

        
    

將未散列的文件路徑傳遞給 mix() 函數，然后在后端，我們將弄清楚應該導入哪個腳本或樣式表。請注意，你可能/應該使用這個函數，即使沒有對文件進行版本控制。

mix.version() 將自動生成編譯后的JavaScript、Sass/Less或合并文件。但是，如果你還希望將額外的文件作為構建的一部分，簡單地傳遞路徑或路徑數組，就像這樣:

mix.version(["public/js/random.js"]);

現在，我們會版本化任何相關的編譯文件，但是我們還會附加一個查詢字符串，public/js/random.js?{hash}，并更新 mix-manifest.json 文件。

mix.sass("src", "output", pluginOptions);
mix.standaloneSass("src", "output", pluginOptions); // Isolated from Webpack build.
mix.less("src", "output", pluginOptions);
mix.stylus("src", "output", pluginOptions);
mix.postCss("src", "output", [ require("precss")() ])

一個單一的方法調用允許你編譯你的 Sass，Less，或 Stylus 文件，同時自動應用 CSS3 前綴。

雖然 webpack 可以將所有CSS直接插入到綁定的JavaScript中，但Laravel Mix會自動執行必要的步驟，將其提取到你想要的輸出路徑中。

如果你需要編譯多個頂級文件，你可以根據需要調用 mix.sass()(或任何一個預處理器變體). 對于每個調用，webpack 將輸出一個包含相關內容的新文件。

mix.sass("src/app.scss", "dist/") // creates "dist/app.css"
   .sass("src/forum.scss", "dist/"); // creates "dist/forum.css"

讓我們看一個例子

webpack.mix.js

let mix = require("laravel-mix");

mix.sass("resources/assets/sass/app.sass", "public/css");

./resources/assets/sass/app.sass

$primary: grey

.app
    background: $primary

Tip : 對于 Sass 編譯, 你可以使用 .sass 和 .scss 語法

像往常一樣運行 npm run webpack 進行編譯. 你會發現 ./public/css/app.css 文件包含

.app {
  background: grey;
}

編譯的時候, Laravel Mix 的首先是去分別的調用 Node-Sass, Less，和 Slylus 來編譯你的 Sass, Less 文件。有時，你可能需要重寫我們傳遞給它們的默認選項。可以將它們作為第三個參數提供給 mix.sass(), mix.less() 和 mix.stylus()。

Node-Sass 選項:?https://github.com/sass/node-sass#options

Less 選項:?https://github.com/webpack-contrib/less-loader#options

Stylus 插件
如果使用 Stylus, 你可能希望安裝額外的插件，比如 Rupture 。運行 npm install rupture 來安裝這個插件，然后在你的 mix.stylus() 中調用, 例如:

mix.stylus("resources/assets/stylus/app.styl", "public/css", {
    use: [
        require("rupture")()
    ]
});

如果希望更深一步，并且在全局中自動導入插件，您可以使用 import 選項。這里有一個例子:

mix.stylus("resources/assets/stylus/app.styl", "public/css", {
    use: [
        require("rupture")(),
        require("nib")(),
        require("jeet")()
    ],
    import: [
        "~nib/index.styl",
        "~jeet/jeet.styl"
    ]
});

就是這個樣子滴!

一個關鍵的 webpack 概念是，它將重寫你的樣式表中的任何 url()。雖然這可能最初聽起來很奇怪，但它是一項非常強大的功能。

一個例子

假設我們想要編譯一些Sass，其中包含一個圖像的相對url。

.example {
    background: url("../images/thing.png");
}

提示:url()的絕對路徑將被排除在url重寫之外。因此，url("/images/thing.png")或url("http://example.com/images/thing.png") 將不會被更改。

注意,這里說的是相對URL? 默認情況下，Laravel Mix 和 webpack 將會找到 thing.png ，將其復制到 public/images 文件夾中，然后在生成的樣式表中重寫 url()。因此，編譯的CSS將是:

.example {
  background: url(/images/thing.png?d41d8cd98f00b204e9800998ecf8427e);
}

這也是 webpack 的一個很酷的特性。然而，它確實有一種傾向，讓那些不理解 webpack 和 css-loader 插件如何工作的人感到困惑。你的文件夾結構可能已經是您想要的了，而且你希望不要修改那些url()。如果是這樣的話，我們確實提供了一個覆蓋方式:

mix.sass("src/app.scss", "dist/")
   .options({
      processCssUrls: false
   });

把這個加上你的 webpack.mix.js 文件中，我們將不再匹配 url() 或復制資源到你的公共目錄。因此，編譯后的CSS將與你輸入時一樣:

.example {
  background: url("../images/thing.png");
}

這樣的好處是，當禁用url處理時，您的 Webpack, Sass 編譯和提取可以更快地編譯。

默認情況下，Mix 將通過流行的 Autoprefixer PostCSS plugin 將所有的CSS文件連接起來。因此，你可以自由使用最新的CSS 3語法，并理解我們將自動應用任何必要的瀏覽器前綴。在大多數情況下，默認設置應該就可以，但是，如果你需要調整底層的自動修復程序配置，那么如下所示:

mix.sass("resources/assets/sass/app.scss", "public/css")
   .options({
        autoprefixer: {
            options: {
                browsers: [
                    "last 6 versions",
                ]
            }
        }
   });

另外，如果你想完全禁用它——或者依賴一個已經包含 自動前綴的PostCSS插件:

mix.sass("resources/assets/sass/app.scss", "public/css")
   .options({ autoprefixer: false });

但是，你可能想要在構建中應用額外的PostCSS插件。木問題, 只需在NPM中安裝所需的插件，然后在 webpack.mix.js 文件中引用,如下所示:

mix.sass("resources/assets/sass/app.scss", "public/css")
   .options({
       postCss: [
            require("postcss-custom-properties")
       ]
   });

完成了!現在可以使用和編譯自定義CSS屬性(如果這是您的東西)。例如,如果 resources/assets/sass/app.scss 包含…

:root {
    --some-color: red;
}

.example {
    color: var(--some-color);
}

編譯完成將會是

.example {
  color: red;
}

或者，如果你更喜歡跳過 Sass/Less/Stylus 編譯步驟，而是使用 PostCSS，你可以通過mix.postCss() 方法來完成。

mix.postCss("resources/assets/css/main.css", "public/css", [
   require("precss")()
]);

請注意，第三個參數是應該應用于你構建的 postcss 插件的數組。

如果你不希望 Mix 和 Webpack 以任何方式處理你的 Sass 文件，你可以使用mix.standaloneSass()，這將大大改善你應用程序的構建時間。請記住:如果你選擇了這條路線，Webpack 不會觸及你的 CSS。它不會重寫 url，復制資源(通過 file-loader)，或者應用自動圖像優化或CSS清理。如果這些特性對于你的應用程序來說是沒有必要的，那么一定要使用這個選項而不是mix.sass()。

mix.standaloneSass("resources/assets/sass/app.scss", "public/css");

注意:如果你正在使用 standaloneSass，在使用 npm run watch 進行文件更改時，你將需要使用下劃線來前綴導入的文件，以將它們標記為依賴文件(例如，_header.scss _alert.scss)。如果不這樣做，將導致Sass編譯錯誤和/或額外的CSS文件。

mix.copy(from, to);
mix.copy("from/regex/**/*.txt", to);
mix.copy([path1, path2], to);
mix.copyDirectory(fromDir, toDir);

有時, 你需要復制一個或者多個文件作為構建過程的一部分。沒有問題, 這是小事一樁。使用mix.copy() 方法指定源文件或文件夾，然后指定您想要的目標文件夾/文件

mix.copy("node_modules/vendor/acme.txt", "public/js/acme.txt");

在編譯時，"acme" 文件將被復制到 "public/js/acme.txt"。這是一個常見的用例，當你希望將一組字體通過 NPM 安裝到 public 目錄時。

默認情況下，Laravel Mix將顯示每個編譯的系統通知。這樣，你就可以快速查看是否有需要查詢的錯誤。但是，在某些情況下，這是不可取的(例如在生產服務器上編譯)。如果發生這種情況，它們可以從你的 webpack.mix.js 文件中禁用。

mix.js(src, output)
   .disableNotifications();

mix.combine(["src", "files"], "destination");
mix.babel(["src", "files"], destination);
mix.minify("src");
mix.minify(["src"]);

如果使用得當，Laravel Mix 和 webpack 應該負責所有必要的模塊捆綁和最小化。但是，你可能有一些遺留代碼或第三方庫需要連接和最小化, 這并不是一個問題。

考慮下面的代碼片段:

mix.combine(["one.js", "two.js"], "merged.js");

這自然會合并 one.js 和 two.js 到一個多帶帶的文件，叫做 merged.js。與往常一樣，在開發期間，合并文件將保持未壓縮狀態。但是，對于生產(export NODE_ENV=production)，這個命令將會最小化 merged.js。

組合文件與Babel編譯。

如果需要組合 使用 ES2015 方法編寫的JavaScript文件，你可以更新的 mix.combine() 調用 mix.babel()。方法簽名相同。唯一的區別是，在將文件組合起來之后，Laravel Mix將對結果進行Babel編譯，從而將代碼轉換成所有瀏覽器都能理解的JavaScript代碼。

mix.babel(["one.js", "two.js"], "merged.js");

同樣，你也可以使用 mix.minify() 命令縮小一個或多個文件。

mix.minify("path/to/file.js");
mix.minify(["this/one.js", "and/this/one.js"]);

這里有一些值得注意的事情:

該方法將創建一個額外的 *.min.ext 文件。因此，壓縮 app.js 將生成 app.min.js。

再一次聲明，壓縮只會在生產過程中發生。(export NODE_ENV=production)。

不需要調用 mix.combine(["one.js", "two.js"], "merged.js").minify("merged.js"); ，只使用單一的 mix.combine() 調用。它會兼顧兩者。

重要:請注意，壓縮只適用于CSS和JavaScript文件。minifier不理解任何其他提供的文件類型。

mix.autoload({
   jquery: ["$", "window.jQuery"]
});

Webpack提供了必要的功能，可以在 Webpack 所要求的每個模塊中把一個模塊作為變量。如果你使用的是一個特定的插件或庫，它依賴于一個全局變量，例如jQuery, mix.autoload() 可能會對你有用。

考慮下面的例子:

mix.autoload({
   jquery: ["$", "window.jQuery"]
});

該代碼片段指定 webpack 應該將 var $ = require("jquery") 添加到它所遇到的全局$標識符或 window.jQuery 中。漂亮!

mix.then(function () {});

你可能需要監聽每次 webpack 完成編譯的事件。也許你需要手動應用一些適合你的應用程序的邏輯。如果是這樣，您可以使用 mix.then() 方法來注冊任何回調函數。這里有一個例子:

mix.js("resources/assets/js/app.js", "public/js")
   .then(() => {
        console.log("webpack has finished building!");
   });

回調函數將通過 webpack Stats 對象，允許對所執行的編譯進行檢查:

mix.js("resources/assets/js/app.js", "public/js")
   .then((stats) => {
        // array of all asset paths output by webpack
        console.log(Object.keys(stats.compilation.assets));
   });

可以在這里找到Stats對象的官方文檔 : https://github.com/webpack/do...

mix.webpackConfig({} || cb);

當然，你可以自由編輯提供的 webpack.config.js 文件，在某些設置中，更容易直接從你的 webpack.mix.js 修改或覆蓋默認設置。對于Laravel應用來說尤其如此，默認情況下是在項目根文件夾中沒有 webpack.config.js。

例如，你可能希望添加一個由webpack自動加載的模塊的自定義數組。在這個場景中，您有兩個選項:

根據需要編輯你的 webpack.config.js 文件

在你的 webpack.mix.js 中調用 mix.webpackConfig() 文件，并傳遞重寫參數。然后混合將進行一個深度合并。

下面，作為一個示例，我們將為 Laravel Spark 添加一個自定義模塊路徑。

mix.webpackConfig({
    resolve: {
        modules: [
            "node_modules",
            path.resolve(__dirname, "vendor/laravel/spark/resources/assets/js")
        ]
    }
});

當傳遞回調函數時，你可以訪問webpack及其所有屬性。

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery", 
                "window.jQuery": "jquery",
            })
        ]
    };
});

基于組件的系統 Mix 使用場景構建它的API，你也可以訪問—是否為你的項目擴展Mix，或者作為一個可重用的包分發到世界。

// webpack.mix.js;
let mix = require("laravel-mix");

mix.extend("foo", function(webpackConfig, ...args) {
    console.log(webpackConfig); // the compiled webpack configuration object.
    console.log(args); // the values passed to mix.foo(); - ["some-value"]
});

mix.js("src", "output").foo("some-value");

在上面的示例中，我們可以看到 mix.extend() 接受兩個參數:在定義組件時應該使用的名稱，以及一個回調函數或類，這些函數注冊并組織必要的webpack邏輯。在后臺，一旦構建了底層webpack配置對象，Mix將觸發這個回調函數。這將給你一個機會來插入或覆蓋任何必要的設置。

雖然簡單的回調函數可能對快速擴展很有用，但在大多數情況下，您可能希望構建一個完整的組件類，比如:

mix.extend(
    "foo",
    new class {
        register(val) {
            console.log("mix.foo() was called with " + val);
        }

        dependencies() {}

        webpackRules() {}

        webpackPlugins() {}

        // ...
    }()
);

在擴展 Mix 時，通常需要觸發一些指令:

安裝這些依賴關系。

將此規則/加載程序添加到 webpack 中。

包含這個webpack插件。

完全覆蓋webpack配置的這一部分。

將此配置添加到Babel。

等。

這些操作中的任何一個都是帶有 Mix 組件系統有聯系。

組件的接口

name:當調用組件時，應該使用什么作為方法名。(默認為類名。)

dependencies:列出應該由Mix安裝的所有npm依賴項。

register:當您的組件被調用時，所有的用戶參數將立即被傳遞給這個方法。

boot:啟動組件。這個方法是在用戶的webpack.mix之后觸發的。js文件已經加載完畢。

webpackEntry:附加到主混合webpack入口對象。

webpackRules:與主webpack加載器合并的規則。

webpackplugin:與主webpack配置合并的插件。

webpackConfig:覆蓋生成的webpack配置。

babelConfig:額外的Babel配置應該與Mix的默認值合并。

這里有一個示例/虛擬組件，它可以讓你更好地了解如何構建自己的組件。更多的例子，請參考在后臺Mix 使用的組件。

class Example {
    /**
     * The optional name to be used when called by Mix.
     * Defaults to the class name, lowercased.
     *
     * Ex: mix.example();
     *
     * @return {String|Array}
     */
    name() {
        // Example:
        // return "example";
        // return ["example", "alias"];
    }

    /**
     * All dependencies that should be installed by Mix.
     *
     * @return {Array}
     */
    dependencies() {
        // Example:
        // return ["typeScript", "ts"];
    }

    /**
     * Register the component.
     *
     * When your component is called, all user parameters
     * will be passed to this method.
     *
     * Ex: register(src, output) {}
     * Ex: mix.yourPlugin("src/path", "output/path");
     *
     * @param  {*} ...params
     * @return {void}
     *
     */
    register() {
        // Example:
        // this.config = { proxy: arg };
    }

    /**
     * Boot the component. This method is triggered after the
     * user"s webpack.mix.js file has executed.
     */
    boot() {
        // Example:
        // if (Config.options.foo) {}
    }

    /**
     * Append to the master Mix webpack entry object.
     *
     * @param  {Entry} entry
     * @return {void}
     */
    webpackEntry(entry) {
        // Example:
        // entry.add("foo", "bar");
    }

    /**
     * Rules to be merged with the master webpack loaders.
     *
     * @return {Array|Object}
     */
    webpackRules() {
        // Example:
        // return {
        //     test: /.less$/,
        //     loaders: ["..."]
        // });
    }

    /*
     * Plugins to be merged with the master webpack config.
     *
     * @return {Array|Object}
     */
    webpackPlugins() {
        // Example:
        // return new webpack.ProvidePlugin(this.aliases);
    }

    /**
     * Override the generated webpack configuration.
     *
     * @param  {Object} webpackConfig
     * @return {void}
     */
    webpackConfig(webpackConfig) {
        // Example:
        // webpackConfig.resolve.extensions.push(".ts", ".tsx");
    }

    /**
     * Babel config to be merged with Mix"s defaults.
     *
     * @return {Object}
     */
    babelConfig() {
        // Example:
        // return { presets: ["react"] };
}

請注意，上面示例中的每個方法都是可選的。在某些情況下，您的組件可能只需要添加一個webpack加載程序和/或調整混合使用的Babel配置。沒有問題的話省略其余的接口。

class Example {
    webpackRules() {
        return {
            test: /.test$/,
            loaders: []
        };
    }
}

現在，當 Mix 構造底層 webpack 配置時，你的規則將包含在生成的webpackConfig.module.rules 數組中。

一旦你構建或安裝了想要的組件，只需從 webpack.mix.js 中獲取它即可，你都準備好了。

// foo-component.js

let mix = require("laravel-mix");

class Example {
    webpackRules() {
        return {
            test: /.test$/,
            loaders: []
        };
    }
}

mix.extend("foo", new Example());

// webpack.mix.js

let mix = require("laravel-mix");
require("./foo-component");

mix
    .js("src", "output")
    .sass("src", "output")
    .foo();

當Laravel Mix 與 Browsersync 已經支持了開箱即用，你可能更喜歡使用LiveReload, 當檢測到修改時，LiveReload可以自動監視您的文件并刷新頁面。

npm install webpack-livereload-plugin@1 --save-dev

將以下幾行添加到 webpack.mix.js 底部。

var LiveReloadPlugin = require("webpack-livereload-plugin");

mix.webpackConfig({
    plugins: [
        new LiveReloadPlugin()
    ]
});

雖然 LiveReload 有她很好用的默認值，但是這里可以查看一個可用的插件選項列表。

最后，我們需要安裝LiveReload.js。您可以通過 LiveReload Chrome 插件，或者在你的主要站點模板的關閉標記之前添加以下代碼:

@if(config("app.env") == "local")
    
@endif

npm run watch

現在，LiveReload將自動監控您的文件并在必要時刷新頁面。享受吧!

jQuery UI是一個用于呈現公共組件的工具包，比如datepickers、draggables等。不需要做任何調整，以使其與 Laravel Mix 一起工作。

構建 webpack.mix.js 配置

mix.js("resources/assets/js/app.js", "public/js")
   .sass("resources/assets/sass/app.scss", "public/css");

安裝 jquery-ui

npm install jquery-ui --save-dev

加載必要插件

// resources/assets/js/app.js

import $ from "jquery";
window.$ = window.jQuery = $;

import "jquery-ui/ui/widgets/datepicker.js";

加載 CSS

// resources/assets/sass/app.scss

@import "~jquery-ui/themes/base/all.css";

觸發 UI 組件

// resources/assets/js/app.js
$("#datepicker").datepicker();

mix.options({
    extractVueStyles: false,
    processCssUrls: true,
    uglify: {},
    purifyCss: false,
    //purifyCss: {},
    postCss: [require("autoprefixer")],
    clearConsole: false
});

如果需要的話可以使用一些混合選項和覆蓋選項。請注意上面的選項，以及它們的默認值。這里有一個快速概述:

extractVueStyles:提取 .vue 組件樣式(CSS在