laravel-mix 編譯環境建置

| kindping

淺談 laravel-mix 與編譯環境建置。

先前談過 webpack 這個好用的編譯工具，但是一開始使用時，常常對於設定檔的設定很困擾。這邊介紹另外一套，基於 webpack 的編譯工具 laravel-mix。

laravel-mix 原本是搭配知名 PHP framework 使用，但其實也可以拿來獨立使用，不須依附 laravel framework (少部分需要 PHP 支援的功能無法使用，例如: version <-> {{ mix() }})。

雖然 laravel-mix 編譯效能比起 webpack 還是有落差，不過因為已經將設定檔處理完畢，相對於使用上是相對友善的。以下介紹如何安裝 laravel-mix 與建置一個編譯環境。

安裝

yarn add laravel-mix

複製設定檔

cp node_modules/laravel-mix/setup/webpack.mix.js ./

如果是 windows 作業系統，直接進入該檔案進行複製。

安裝相依套件

laravel-mix 編譯因應跨平台，使用 cross-env 套件，所以需要先行安裝。

yarn add cross-env

設定編譯指令

在 package.json 內加入

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

開發指令

yarn run watch

打包指令

yarn run prod

建立專案

示範使用 laravel-mix 建立一個使用以下套件的專案

  • vue
  • axios
  • bootstrap 4
  • fontawesome 5 free

目錄結構

  • dist 對外檔案
  • src 開發檔案

webpack.mix.js

let mix = require('laravel-mix')

mix.extract(['axios', 'vue'])
    .js('src/app.js', 'dist/js/')
    .sass('src/app.scss', 'dist/css')
    .setPublicPath('dist')

extract 將專案會用到的 vue, axios 套件獨立萃取出來，產生 manifest.js 與 vendor.js 。

setPublicPath 設定對外檔案的目錄。設定後，相關資源都會依據這個目錄為根目錄。

package.js

{
  "name": "laravel-mix",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.12.0",
    "axios": "^0.19.1",
    "bootstrap": "^4.4.1",
    "cross-env": "^6.0.3",
    "laravel-mix": "^5.0.1",
    "resolve-url-loader": "3.1.0",
    "sass": "^1.25.0",
    "sass-loader": "8.*",
    "vue": "^2.6.11",
    "vue-template-compiler": "^2.6.11"
  }
}

dist/index.html

顯示頁面。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Use Laravel-mix Build</title>
        <link rel="stylesheet" href="css/app.css" />
    </head>
    <body>
        <div id="app" class="container">
            <div class="alert alert-info">
                <h4><i class="far fa-thumbs-up"></i> {{ title }} <i class="far fa-bell"></i></h4>
            </div>
        </div>
    </body>
    <script src="js/manifest.js"></script>
    <script src="js/vendor.js"></script>
    <script src="js/app.js"></script>
</html>

src/bootstrap.js

將需要使用到的套件初始化。

window.axios = require('axios')

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

window.Vue = require('vue')

src/app.js

require('./bootstrap')

new Vue({
    el: '#app',
    data() {
        return {
            title: 'Use Laravel-mix build vue, bootstrap 4, fontawesome 5 free, axios.',
        }
    },
})

src/app.scss

引用 bootstrap 4 與 fontawesome 5 free

$fa-font-path: '[email protected]/fontawesome-free/webfonts';
@import '[email protected]/fontawesome-free/scss/fontawesome';
@import '[email protected]/fontawesome-free/scss/solid';
@import '[email protected]/fontawesome-free/scss/regular';
@import '[email protected]/fontawesome-free/scss/brands';

@import '~bootstrap/scss/bootstrap';

佈署專案

初始化套件

yarn install

編譯

yarn run pord

測試

使用 live server 或是上傳到主機，如果沒問題，會出現下面畫面。

使用 live server 時，需使用 dist 為根目錄啟動 live server。

上傳到主機則須注意路徑對應位置。