【vue组件库搭建03】打包及发布组件库

一、webpack打包js为umd模块

lib新增index.js

import EDemo from "./demo";
import Card from "./card";

const components = {
  EDemo,
  Card,
};

const install = function name(Vue) {
  if (install.installed) return;
  Object.keys(components).forEach((key) => {
    Vue.components(components[key].name, components[key]);
  });
};

const API = { install };
export default API;

1. 新建文件webpack.component.js
2. 安装vue-loader

const glob = require("glob");
const { VueLoaderPlugin } = require("vue-loader");
const path = require("path");

const list = {};

async function makeList(dirPath, list) {
  const files = glob.sync(`${dirPath}/**/index.js`);
  console.log(files, "files");
  for (let file of files) {
    const component = file.split(/[/.]/)[2];
    list[component] = `./${file}`;
  }
}

makeList("components/lib", list);

console.log(list);

module.exports = {
  mode: "development",
  entry: list,
  output: {
    filename: "[name].umd.js",
    path: path.resolve(__dirname, "dist"),
    library: "mu