1、完整引入（抛出commonjs2总文件）
2、按需引入（抛出commonjs2的所有UI组件）
3、支持国际化（commonjs2）
4、提供utils方法（commonjs2，当然官方没有对外说明）
webpack --config build/webpack.common.js 脚本主要用于构建完整引入功能，同时为了可以在业务层面抛出 按需引入、支持国际化 等功能，构建 element-ui.common.js 时需要将 UI组件、支持国际化、utils方法 的源代码排除。
webpack.common.js 配置如下：
// build/webpack.common.js // ...忽略 module.exports = { mode: 'production', entry: { app: ['./src/index.js'] }, output: { path: path.resolve(process.cwd(), './lib'), publicPath: '/dist/', filename: 'element-ui.common.js', chunkFilename: '[id].js', libraryExport: 'default', library: 'ELEMENT', // 生成commonjs2模块 libraryTarget: 'commonjs2' }, resolve: { extensions: ['.js', '.vue', '.json'], // 'element-ui': path.resolve(__dirname, '../') alias: config.alias, modules: ['node_modules'] }, // 这里用于排除UI组件、支持国际化、utils方法的源代码，这些源代码需要额外的脚本进行构建 externals: config.externals, optimization: { // commonjs2无须压缩处理 minimize: false }, // ...忽略 };
重点需要关注一下 config.externals 属性，打印输出该变量的值：
[{ vue: 'vue', // 排除所有UI组件的源代码 'element-ui/packages/option'：'element-ui/lib/option', // ... // 排除国际化的源代码 'element-ui/src/locale': 'element-ui/lib/locale', // 排除utils方法的源代码 'element-ui/src/utils/vue-popper': 'element-ui/lib/utils/vue-popper', 'element-ui/src/mixins/emitter': 'element-ui/lib/mixins/emitter', 'element-ui/src/transitions/collapse-transition': 'element-ui/lib/transitions/collapse-transition' // ... }, // var nodeExternals = require('webpack-node-externals'); // nodeExternals() [Function] ];
属性可以将一些特定的依赖从输出的bundle中排除，例如在开发态中组件之间有依赖关系， element-ui/packages/pagination 中引入 element-ui/packages/option 组件：
pagecages/pagination/src/pagination.js
// pagination组件中需要用到option组件 import ElOption from 'element-ui/packages/option'; // ...
Webpack构建后，可以发现在 element-ui.common.js 中并没有将 element-ui/packages/option 组件打包在内，而只是更改了它的引入路径 element-ui/lib/option （在实现 按需引入 功能时会用 webpack --config build/webpack.component.js 脚本构建出该文件）。
// lib/element-ui.common.js module.exports = require("element-ui/lib/option");
因此以上列出的 config.externals 属性的 key 和 value 可以排除 UI组件、支持国际化、utils方法 功能的代码。
config.externals 属性的最后一个值是 [Function] ，是由webpack-node-externals 生成的。这里解释一下 webpack-node-externals 的作用：
Webpack allows you to define externals - modules that should not be bundled. When bundling with Webpack for the backend - you usually don't want to bundle its node_modules dependencies. This library creates an externals function that ignores node_modules when bundling in Webpack.
例如在 Elment 组件库开发中需要依赖 deepmerge ，那么Webpack构建的时候不需要将该依赖bundle到 element-ui.common.js 中，而是将其添加到 Element 组件库（作为npm包发布）的 dependencies ，这样通过npm安装 Element 的同时也会安装它的依赖 deepmerge ，从而使得 element-ui.common.js 通过 require("deepmerge") 的形式引入该依赖不会报错。
这里列出 element-ui.common.js 排除的一些代码：
// 排除utils源码(utils源码会通过`npm run build:utils`脚本构建) module.exports = require("element-ui/lib/utils/dom"); // 排除vue module.exports = require("vue"); // 排除国际化源码(国际化源码会通过`npm run build:utils`脚本构建) module.exports = require("element-ui/lib/locale"); // 需要注意和Vue相关的JSX依赖（Vue CLI3系统构建的包也会有一个该功能的依赖） module.exports = require("babel-helper-vue-jsx-merge-props"); // 排除一些Elment组件使用的其他依赖 module.exports = require("throttle-debounce/throttle"); // 排除UI组件源码(UI组件源码会通过`webpack --config build/webpack.component.js`脚本构建) module.exports = require("element-ui/lib/option");
需要注意 Element 发布的npm包入口文件就是 element-ui.common.js ，可以通过package.json中的 main 字段信息查看。
webpack --config build/webpack.component.js