//安装 vue-loader

//webpack配置文件，新建webpack.component.js（自定义命名）

const { VueLoaderPlugin } = require('vue-loader');
const path = require('path');//绝对路径
const glob = require('glob');//遍历
const list = {};

async function makeList(dirPath,list){
    const files = glob.sync('${dirPath}/**/index.js'); //dirPath下所有index.js路径的数组
    for(let file of files){
        const component = file.split(/[/.]/)[2]; //获取组件name
        list[component] = './${file}'; //填充list
    }
}
makeList('components/lib',list);

//files = ['components/lib/card/index.js','components/lib/demo/index.js']
//list = {
//    card:'components/lib/card/index.js',
//    demo:'components/lib/demo/index.js',
// }


module.exports = {
    entry: list, //入口
    mode: 'development',
    output: {
        filename: '[name].umd.js', //输出文件名
        path: path.resolve(__dirname, 'dist'),  //输出目录
        library：'mui', //配置到该字段下
        libraryTarget: 'umd' //打包成umd模块
    },
    plugins: [ //处理Vue文件
        new VueLoaderPlugin(), 
    ],
    module: {
        rules: [
            test:/\.vue$/, //对vue文件使用vue-loader
            use: [
                {
                    loader: 'vue-loader',
                }
            ]
        ]
    }
}

//package.json配置打包命令

"scripts": {
    "build:js": "webpack --config ./webpack.component.js"
}

//配置组件库入口index.js

//引入组件库中定义的所有组件
import Demo from './demo';
import Card from './card';

const components = {
    Demo,
    Card,
};

const install = function (Vue) {
    if(install.installed) return; //避免重复安装
    Object.keys(components).forEach(key => {
        Vue.component(components[key].name, components[key]); //对所有key值用component注册
    });
}

const API = {
    install,
}

export default API; //导出

//打包

npm run build:js

由于配置的时候配置的入口文件都是对应的组件的入口文件，因此打包出来也是两个包，所以需要设置一个统一的入口文件，

在lib目录下设置一个index.js文件用于设置统一入口文件。

list下的是个对象，获取每个组件的入口文件，当文件很多时候通过遍历进行获取