摘要：在上一篇文章基于分支，從到，再到，簡單的介紹了這里分享在開發過程中，前端選擇的心理活動。而作為核心開發之一，也負責前端這塊的開發。

在上一篇文章《 ThinkSNS+基于Laravel master分支，從1到 0，再到0.1》，簡單的介紹了 ThinkSNS+ ,這里分享在開發過程中，前端選擇的心理活動。

在 Laravel 中，前端工作流默認是由 laravel-mix 包驅動的，集成了 Vue.js。而作為核心開發之一，也負責前端這塊的開發。其實，這是seven第一次寫 Vue，之前都是用 React 做開發。

然后seven和另一個核心成員 Wayne 在樓道抽煙聊前端這事情，要不要用 Vue,這個東西對于我們來說，都沒有做過，我們都只會 React。然后突然Wayne司機來了一句“玩點沒玩過的嘛”！就這樣，我們決定前端使用 Vue。

跑題了，決定用什么前端框架后，起初是5.3版本的 Laravel 前端構建有 gulp 和 webpack 都在里面，然后在 gulpfile.js 里面配置編譯 js，這就不爽了呀，之前用慣了 webpack 也用慣了自動導出 css。這家伙不能從js里面抽離css多帶帶打包，樣式，js都是多帶帶編譯的。如何能忍？但是還是忍了，因為 5.4 即將發布，因為前端不是 ThinkSNS+ 重點方向，過了很久，5.4 雖然還沒正式發布，我們決定直接合并。發現 laravel-mix 也是這個樣子。然后，然后，算了，刪了 laravel-mix 吧，來自于開發 React 經驗做構建的自信，我決定自己做前端構建。

好了，開始自己做構建了，為了保持js語法的統一性，我們一直都是使用 webpack.config.babel.js 文件名，使用 ES6 語法配置webpack，所以，首先依賴的包是 Babel 各個包。然后依賴進入了 Vue 包，哈哈成功了，可以轉換 Vue 了。

高興的太早了，是的，沒有達到想要的效果。style 也沒有辦法導出為獨立css。最后利用 vue-cli 生成了一個example，發現這個構建也是很多問題。原因嘛，主要是不適合用在 laravel 中。example 的意義在于適合大多數情況，而我們的需求就是少數情況，由此踏上了各種文檔閱讀之旅。

最后在 vue-cli 中找到了答案，按照 example 的配置，去掉不需要的多余依賴，在 配置中逐步依賴，最終完成（感謝尤大神提供了這么全的配置說明）。

配置是完成了，強迫癥不能忍什么？使用 laravel-mix 的時候是可以使用 Laravel 的 mix 函數的，自己做構建，沒法玩了。后來閱讀 laravel-mix 包的代碼，也沒有找到答案，然后拿著 mix-manifest.json 文件反復研究，突然茅塞頓開，不就是這么一個文件的事情么？我自己生成他不就完了？

解決方法有了，如何實現呢？起初在 webpack 配置中的實現如下：

利用 webpack-stats-plugin 這個包，自己實現 transform 并把 文件輸出到輸出目錄。

這個東西一直用了接近兩個月，直到后來，我們有個包 「plus-component-web」主要開發的是 h5 這個包就是利用 vue-cli 生成的，你想象一下配合laravel后，沒有watch，沒有hot，開發人員忍了一個月，每次修改完運行 yarn build 看樣子，再修改。最后大功能開發完成后，調bug，調細節，簡直要人崩潰好么。

作為為公司的“前端擔當”用了一個上午的時間，刪了 vue-cli 生成的構建套裝，自己做了一套。問題出現了，我希望這個拓展包中，可以和 ThinkSNS+ 的后臺開發一樣，可以使用 mix 函數怎么辦？

總不能在這個包里面也放上面的 函數+拓展生成 mix-manifest.json 文件吧？這也太不方便了點。于是決定，我要早輪子，最后在周末的時候，終于開發出了一個 webpack 插件 webpack-laravel-mix-manifest

核心代碼如下：

插件的實現思路來自于 webpack-stats-plugin 這個包，非常感謝這個作者。

然后轉換方法如下：

我知道，各位看官要吐槽了，這里為啥不用 reduce ?起初，初版真的是 reduce 實現的，代碼看起來也很好。問題來了，vue的構建都是 node 4 起步，如果用 reduce, 至少 node 6 起步了。最后妥協了，為了保證 node 4 - 7 都能運行。用了 for in來生成。

如果你對比過這個 webpack 插件，你一定發現了，之前我在 webpack 配置文件中寫的轉換函數其實是有bug的，例如，我入口不是對象或者數組咋辦？我輸出的不是 name.hash 格式怎么辦？都做不到。在 webpack 插件中，解決了這個問題，最終使用如下：

生成的 mix-manifest.json 如下:

用了 mix 輔助函數，怎么能不提 熱加載呢？在 Laravel 里面熱加載是很有意思的事情。閱讀 laravel-mix 后問題很簡單。只要在 webpack 配置中配置如下：

完美，ThinkSNS+,以及拓展包都惠及了，可以盡情享受 mix 輔助函數帶來的便利。

GitHub:https://github.com/zhiyicx/th...（點擊star，每日關注開發動態。）

　　提供個人／企業聯系方式及認證信息（實名ID／企業營業執照照片或掃描件）及申請說明，發送郵件至lihecong@zhishisoft.com將有機會獲得首批內測資格，名額有限，申請從速。