// {
// "pagination": "./packages/pagination/index.js",
// ...
// "timeline-item": "./packages/timeline-item/index.js"
// }
const webpackConfig = {
mode: 'production',
// 多入口
entry: Components,
output: {
path: path.resolve(process.cwd(), './lib'),
publicPath: '/dist/',
filename: '[name].js',
chunkFilename: '[id].js',
libraryTarget: 'commonjs2'
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: config.alias,
modules: ['node_modules'] },
// 排除其他UI组件、支持国际化、utils的源码，这些源码会额外构建
externals: config.externals,
},
// ...忽略
};
构建单个组件和构建总体入口文件
element-ui.common.js 的Webpack配置类似，需要将
utils 、
locale 以及其他一些依赖排除。
npm run build:utils
build:utils 脚本主要用于构建commonjs的
utils （提供国际化以及
utils 功能）：
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",可以发现该命令并不是通过Webpack进行多文件构建，而是通过Babel直接进行转义处理（Webpack构建会产生额外的Webpack代码，并且配置繁琐，Babel转义处理构建的代码非常干净），将
src 目录下除了Webpack构建入口文件
src/index.js 以外的所有其他文件进行转义处理。执行该脚本最终会在
lib 下生成所有的
utils 文件：
lib
├── directives # commonjs 指令
├── locale # commonjs 国际化API和语言包
├── mixins # commonjs 混入
├── transitions# commonjs 过度动画
├── utils # commonjs 工具方法生成的这些工具方法会被
lib 下的
element-ui.common.js 和各个组件引用，同时在业务层面也可以引用这些工具方法。查看
.babelrc 文件的配置信息：
{
"presets": [
[
"env",
{
"loose": true,
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"] }
}
],
"stage-2"
],
"plugins": ["transform-vue-jsx"],
