vue-cli定製腳手架

年初的時候公司的老後台系統實在難以維護和繼續在其上開發了，因為這個系統被很多人寫過頁面，有前端有後端，編寫前端代碼時都非常隨意，加之沒有模塊化，復用性和可維護性都極低，便下定決定，重新搞一套。

經過一段時間的調研選擇了vue全家桶+elementUI來開發後台系統，讓交互體驗更好，讓開發體驗更好，讓生產效率提高。

從零搭建其實考慮的事情還挺多的，比如：

如何管理代碼倉庫

開發環境，測試環境搭建

如何接入公司的打包上線流程

如何目錄劃分

如何劃分模塊

登錄和許可權如何做

這篇文章來記錄下和腳手架相關的改造，首先其實就是上了vue-cli來做，可是呢？由於預計項目會有很多頁面，這些頁面其實是分模塊的，不同模塊的頁面之前其實關係不大。所以我覺得一個用戶其實大部分時候只會用到其中一個模塊的頁面，如果把所有頁面做成一個單頁應用很多資源載入就不是很必要了，所以第一個改造就是：做成多入口打包，也就是做成多個單頁應用，每個模塊一個入口。

/build/utils

exports.getEntries = function (globPath) { var entries = {} glob.sync(globPath).forEach(function (entry) { var basename = path.basename(entry, path.extname(entry)) entries[basename] = entry }) return entries }

/build/webpack.base.conf

/build/webpack.dev.conf

/build/weback.prod.conf

這樣就完成了多頁面的入口配置，其核心就是兩點：1. 入口配置成數組。2. plugins裡面添加多個HtmlWebpackPlugin分別對應每一個頁面，完成js打包後路徑的自動注入功能。

entry: { vendor: [ vue , vue-router , vuex , element-ui ], echarts: [ vue-echarts ] }, // 這個地方天坑啊~~~死人了。。。:( // vendor是echarts的父模塊，順序不能反：https://github.com/webpack/webpack/issues/1943 // 包括聲明CommonsChunkPlugin的順序也是有關係的，不是隨意的，後聲明的是頂級模塊，先聲明的是依賴頂級模塊的模塊 // HtmlWebpackPlugin注入模塊鏈接的時候的順序也是由此保證的 new webpack.optimize.CommonsChunkPlugin({ names: [ echarts , vendor ], minChunks: function (module, count) { // 抽取公用vendor.css // console.log(module.resource) return ( module.resource && /.css$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, ../node_modules ) ) === 0 ) } }),

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！