当前大部分UI框架设计的Webpack配置都相对复杂，例如 Element 、 Ant Design Vue 和Muse-UI等Vue组件库。例如Element，为了实现业务层面的两种引入形式（ 完整引入 和 按需引入 ），以及抛出一些可供业务层面通用的
utils 、
i18n 等，Webpack配置变得非常复杂。为了简化UI框架的设计难度，这里介绍一种简单的UI框架设计，在此之前先简单介绍一下 Element 的构建流程，以便对比新的UI框架设计。一般组件库的设计者将引入形式设计成 完整引入 和 按需引入 两种形式： 完整引入 的开发相对便利，针对一些大型业务或者对于打包体积不是特别注重的业务， 按需引入 开发的颗粒度相对精细，可以减少业务的打包体积。
设计的UI框架实践项目的github地址是ziyi2/vue-cli3-lerna-ui，包括了preset.json、自己设计的Vue CLI插件以及自己设计的一系列UI组件（和生成的UI框架示例稍有不同），如果觉得整体结构有不合理的或者考虑不够全面的地方，欢迎大家提issue，这样我也可以对它进行完善。如果大家感兴趣，希望大家能够Star一下，这里拜谢大家了！
Element
首先了解
Element 的构建流程，查看 Element
2.7.0 版本
package.json 的npm 脚本 ：
// 其中的`node build/bin/build-entry.js` 生成Webpack构建入口
"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
// 构建css样式
"build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
// 构建commonjs规范的`utils`
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
// 构建umd模块的语言包
"build:umd": "node build/bin/build-locale.js",
// 清除构建文件夹`lib`
"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
// 总体构建
"dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
// 执行eslint校验
"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet"这里重点关注Element的构建脚本，忽略 测试、发布、启动开发态调试页面、构建演示页面
