背景：vue-cli3.x號稱無配置，特將原vue-cli2.x的Web Components進行遷移, 順帶解決下node-sass的問題參考:https://github.com/webpack-contrib/sass-loader（node-sass遷移為Dart-sass）https://blog.csdn.net/mlonly/article/details/88635809（構建組件庫）目的：構建一個能第三方組件庫（element-ui）進行二次封裝，同時能封裝自定義組件，的純js，css，image的組件庫，並分開暴露給外部引用
vue-cli3.x探索3.x中babel配置項全升級新的@babel7.x由原來的babel-全變遷為@babel
vue.config.js即為所有配置區別於wepack的配置項，此配置項為對webpack的二次封裝
內部cli自動協調Dart-sass，不用再處理sass-loader問題
從2.x-3.x的遷徙，webpack其實還是4.x的版本，本質還是差不多，但3.x對配置項進行二次封裝簡化。但對於想高度自由化創建Web Components庫而言，增大了成本，需要解決兼容問題，babel升級問題，vue.config.js的改造問題
vue-cli3.x的改造結果第一種結果參考上面連結構建組件庫，此方法構建的組件庫，當對package.json新建build方法,執行npm run build之後，產出為如下圖1.1
"scripts": {
"build": "vue-cli-service build --target lib --name ntr-component --dest lib packages/index.js",
"build:prod": "cross-env vue-cli-service build",
"dev": "vue-cli-service serve --open",
"prepublishOnly": "npm run build"
},
最終生成結果如下全為common.js，且體積龐大未，無法實現第三方庫的按需加載：
(1.1)
2.第二種對vue.config.js進行改造,自建components.json
{
"SwitchNo": "./packages/SwitchNo",
"Transfer": "./packages/Transfer",
"XScrollbar": "./packages/XScrollbar",
"index": "./packages/index"
}
將入口進行批量化整理，最後執行npm run build:prod 力圖像webpack的entry一樣實現組件的生成，結果如下圖
// 整理入口
const components = require('./components.json')
const entrys = {}
// const apps = []
Object.keys(components).forEach(item => {
// entrys[item] = { entry: components[item], filename: item + '.js' }
entrys[item] = components[item]
// apps.push(components[item])
})
module.exports = {
pages: process.env.NODE_ENV === 'production' ? entrys : {
index: {
entry: 'example/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
最終生成的結果，包含著html,卻不包含image結果繼續維持vue-cli2.x的模板，webpack也是4.x,只是構造為2.x而已，同時通過node-sass遷移為Dart-sass,直接去掉2.x版本的node-sass，繼續維持原有的版本，本次探索vue-cli3.x版本升級結束，斷斷續續歷時4天使用vue-cli2.x組件庫打包之後的結果如圖，滿足第三方組件庫二次封裝，按需加載，體積小，支持自定義組件，可分開引用，簡單明了