// 'element-ui': path.resolve(__dirname, '../')
// alias中的'element-ui'作为npm包抛出后指向了业务项目node_modules所在的npm包路径
alias: config.alias
},
externals: {
// 构建只排除vue
// umd模块通过CDN形式引入,因此将所有的组件、utils、i18n等构建在内
// umd模块没有按需引入功能
vue: config.vue
},
// ...忽略
};
构建文件
lib/index.js 主要的功能是用于CDN形式引入项目,并且无法做到按需加载,产生的体积非常大,对于简单的应用可能不适用。
webpack --config build/webpack.common.js
webpack --config build/webpack.common.js 脚本用于构建commonjs2总文件,执行该脚本最终会在
lib 下生成
element-ui.common.js 文件:
lib
├── element-ui.common.js # commonjs2 总文件 由于该文件需要在业务层面再次使用Webpack构建,因此考量的方面较多。在分析Webpack配置之前,再次回顾一下
Element 能为我们做什么: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无须压缩处理










