在 Laravel Mix 裡使用 Vux 2 的正確姿勢

overtrue發表於2017-02-23
LaravelUX

雖然標題用了 “正確” 一詞，但是我還是要在這裡宣告，它不一定正確哈。

今天新建了一個專案打算使用 Vux2，結果發現得用上 vux-loader 這麼一個玩意兒實現智慧載入，於是折騰了好久也沒看明白文件裡的這段如何在 Laravel Mix 中實踐：

const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
  options: {},
  plugins: [{ name: 'vux-ui' }]
})

以上內容來自： https://vux.li/#/zh-CN/README?id=%E5%BF%AB...

然後又不想 copy Laravel Mix 的那個配置檔案到本專案裡來，然後終於想出一個還不算蹩腳的姿勢：

在 Laravel 專案根目錄建立：webpack.config.js：

const webpackConfig = require('./node_modules/laravel-mix/setup/webpack.config')
const vuxLoader = require('vux-loader')

module.exports = vuxLoader.merge(webpackConfig, {
  options: {},
  plugins: [{ name: 'vux-ui' }]
})

然後修改 package.json 中 config 欄位為上面新建的檔案：

"config": {
    "webpack": "./webpack.config.js"
},

搞定，保持使用 Laravel Mix 提供的 webpack 配置的同時，方便的實現了自定義 webpack config(雖然 mix 有提供 webpackConfig() 方法實現覆蓋，但今天這個 case 就搞不定了)

更新：我已經放棄使用 Vux 了，因為發現還不如直接用 WeUI 來得更方便 ...

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章