当前大部分UI框架设计的Webpack配置都相对复杂，例如 Element 、 Ant Design Vue 和等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的构建脚本，忽略 测试、发布、启动开发态调试页面、构建演示页面 等脚本。
npm run dist
与 Element 构建相关的npm脚本繁多，但是 总体构建脚本 是 dist ：
"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"
&& 是继发执行，只有当前任务成功，才能执行下一个任务。
总体构建脚本包含了以下按顺序执行的脚本命令
npm run clean - 清除构建文件夹lib
npm run build:file - 其中的node build/bin/build-entry.js 生成Webpack构建入口
npm run lint - 执行eslint校验
webpack --config build/webpack.conf.js - 构建umd总文件
webpack --config build/webpack.common.js - 构建commonjs2总文件
webpack --config build/webpack.component.js - 构建commonjs2组件（提供按需引入）
npm run build:utils - 构建commonjs的utils（供commonjs2总文件、commonjs2组件以及业务使用）
npm run build:umd - 构建umd语言包
npm run build:theme - 构建css样式
如果对于对于 umd 、 commonjs2 、 amd 等模块定义不是特别清晰，可参考Webpack文档。
执行 npm run dist 后会在当前根目录生成新的 lib 文件夹，包含以下构建内容：
lib ├── directives # commonjs指令(这里归为utils) ├── locale # commonjs国际化(commonjs语言包和API) ├── mixins # commonjs mixins(这里归为utils) ├── theme-chalk # css 样式文件 ├── transitions # commonjs transitions(这里归为utils) ├── umd # umd语言包 ├── utils ├── alert.js # commonjs组件 ├── aside.js ├── ... ├── element-ui.common.js # commonjs2总文件 ├── ... ├── index.js # umd总文件 ├── ...
从的使用指南结合 lib 可以看出， Element 为我们提供了以下能力：