Laravel-mix 中文文檔

時間  2019-11-06
標籤 laravel mix 中文 文檔 简体版
原文   原文鏈接

鏡像地址 : http://www.javashuo.com/article/p-ckzizbmn-cm.html
原文地址: Laravel Mix Docsjavascript

 

概覽

 

基本示例

larave-mix 是位於webpack頂層的一個簡潔的配置層，在 80% 的狀況下使用 laravel mix 會使操做變的很是簡單。儘管 webpack 很是的強大，但大部分人都認爲 webpack 的學習成本很是高。可是若是你沒必要用再擔憂這些了呢？php

看一下基本的 webpack.mix.js 文件，讓咱們想象一下咱們如今只須要編譯javascript(ES6)和sass文件：css

let mix = require('laravel-mix'); mix.sass('src/app.sass', 'dist') .js('src/app.js', 'dist');

怎麼樣，簡單嗎？html

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

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

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

 

less ?

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

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

 

安裝

儘管 laravel-mix 對於laravel使用來講最優的，但也能被用於其餘任何應用。jquery

 

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 Scripts

把下面的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" }
 

laravel工做流程

咱們先回顧一下通用的工做流程以便你能在本身的項目上採用

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自帶一個歡迎頁面，咱們能夠用這個來作示例，修改一下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Laravel</title> <link rel="stylesheet" href="{{ mix('css/app.css') }}"> </head> <body> <div id="app"> <example></example> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>

刷新頁面，幹得漂亮！

 

常見問題

 

laravel-mix必須在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，webpack不能檢測到個人文件變化

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

  1. 配置 webpack 檢測文件系統的變化, 注意:檢測文件系統是資源密集型操做而且很耗費電池的使用時長.
  2. 轉發文件經過使用相似於 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 就可以檢測到文件的改動了.

若是你仍是有問題，去這兒溜達溜達吧。

 

爲何在個人css文件裏顯示圖片在node_modules裏找不到

你可能用的是相對路徑，可是在你的 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 });

他對老項目特別有用，由於你的文件夾結構已經徹底建立好了。

 

我不想把mix-manifest.json文件放在項目根目錄下

若是你沒有使用 laravel，你的 mix-manifest.json 文件會被放到項目根目錄下，若是你不喜歡的話，能夠調用 mix.setPublicPath('dist/')，而後manifest文件就會被放到dist目錄下。

 

怎樣使用webpack自動加載模塊

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 });
 

爲何我看到一個 "Vue packages version mismatch"錯誤

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

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
 

排障

 

我在更新/安裝 mix 時候出現錯誤

不幸的是，你的依賴項可能沒有正確安裝的緣由有無數個。一個常見的根本緣由是安裝了老版本的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
 

爲何 webpack 不能找到個人 app.js 條目文件?

若是你遇到這樣的失敗信息……

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
 

API

 

Javascript

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 示例

考慮到典型的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 執行編譯。

 

Vue 組件

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

<template> <div class="notification"> {{ body }} </div> </template> <script> export default { data() { return { body: 'I am a notification.' } } } </script> <style> .notification { background: grey; } </style>

若是你瞭解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 文件，而後在瀏覽器裏查看吧！

 

React 支持

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頁面引用它們。

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

實際上，咱們付出了一些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，如今你能夠手動更新你的HTML\Blade文件了:

<body> <div id="app">...</div> <script src="http://localhost:8080/js/bundle.js"></script> </body>

假設你有一些組件，嘗試在瀏覽器裏更改他們的狀態，而後更新他們的模板文件，你能夠看到瀏覽器會馬上反應出你的更新，可是狀態並無被改變。

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

<body> <div id="app"></div> <script src="{{ mix('js/bundle.js') }}"></script> </body>

調整以後，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 文件中可使用

<script src="https://localhost:8080/js/bundle.js"></script>

或者

<script src="{{ mix('js/bundle.js') }}"></script>

在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() 函數，就完成了!咱們將計算出導入的適當文件名。這裏有一個例子:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>App</title> <link rel="stylesheet" href="{{ mix('css/app.css') }}"> </head> <body> <div id="app"> <h1>Hello World</h1> </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html>

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

 

版本化附加文件

mix.version() 將自動生成編譯後的JavaScript、Sass/Less或合併文件。可是，若是你還但願將額外的文件做爲構建的一部分，簡單地傳遞路徑或路徑數組，就像這樣:

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

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

 

Css 預處理器

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()。

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' ] });

就是這個樣子滴!

 

CSS url() 重寫

一個關鍵的 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 編譯和提取能夠更快地編譯。

 

PostCSS 插件

默認狀況下，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; }
 

PostCss 不適用 Sass/Less

或者，若是你更喜歡跳過 Sass/Less/Stylus 編譯步驟，而是使用 PostCSS，你能夠經過mix.postCss() 方法來完成。

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

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

 

獨立Sass構建

若是你不但願 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/docs/wiki/node.js-api#stats

 

快速 webpack 配置

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

基於組件的系統 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();
 

自定義方法

 

LiveReload

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

 

安裝 webpack-livereload-plugin

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

配置 webpack.mix.js

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

var LiveReloadPlugin = require('webpack-livereload-plugin'); mix.webpackConfig({ plugins: [ new LiveReloadPlugin() ] });

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

 

安裝 LiveReload.js

最後，咱們須要安裝LiveReload.js。您能夠經過 LiveReload Chrome 插件，或者在你的主要站點模板的關閉

 

 

https://laravel-china.org/articles/12523/translated-laravel-mix-chinese-document

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程