溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
年初的時候公司的老后臺系統實在難以維護和繼續在其上開發了，因為這個系統被很多人寫過頁面，有前端有后端，編寫前端代碼時都非常隨意，加之沒有模塊化，復用性和可維護性都極低，便下定決定，重新搞一套。
經過一段時間的調研選擇了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
module.exports = {
entry: utils.getEntries('./src/modules/*/*.js'),
/build/webpack.dev.conf
/build/weback.prod.conf
var modules = utils.getEntries('./src/modules/*/*.html')
Object.keys(modules).forEach(function (moduleName) {
var config = {
filename: moduleName + '/index.html',
template: modules[moduleName],
inject: true,
excludeChunks: Object.keys(modules).filter(function (name) {
return name != moduleName
})
}
module.exports.plugins.push(new HtmlWebpackPlugin(config))
})
這樣就完成了多頁面的入口配置，其核心就是兩點：1. 入口配置成數組。2. plugins里面添加多個HtmlWebpackPlugin分別對應每一個頁面，完成js打包后路徑的自動注入功能。
這里還有個地方需要注意，就是抽取公用的js和css代碼出來，這里做了一下改造，就是echarts指定提取出來，而不是按引用次數那種自動提取, 這里還踩了個坑，詳細見注釋。
在webpack.prod.conf的plugins里面加入：
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
)
}
}),
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
