Javascript 用于将vue组件发布到npm包中的网页包配置

下面是我的组件的主要js代码

import './sass/main.scss'
import Vlider from './Vlider.vue'

function install(Vue) {
    if (install.installed) return;
    install.installed = true;
    Vue.component('vlider', Vlider);
}

const plugin = {
    install,
};

let GlobalVue = null;
if (typeof window !== 'undefined') {
    GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
    GlobalVue = global.Vue;
}
if (GlobalVue) {
    GlobalVue.use(plugin);
}

Vlider.install = install;

export default Vlider

有人能帮我做一下网页配置吗？我需要从index.js中输出4个文件

dist/vlider.umd.js

dist/vlider.esm.js

dist/vlider.min.js

vlider.css

因此它可以支持

package.json中的多个入口点

"main": "dist/vlider.umd.js",
"module": "dist/vlider.esm.js",
"unpkg": "dist/vlider.min.js",
"browser": "src/vlider.vue"

这是我第一次处理webpack，因此非常感谢您的帮助
webpack不支持将
esmodule
作为输出目标。您可以创建
commonjs
模块或
umd/iife
模块

如果您需要<代码> ESModule <代码>作为目标，那么考虑使用<强> RoopUp。一般来说，当您需要绑定库时，应该使用汇总，对于应用程序绑定，应该使用网页。（注意：汇总很好，但TypeScript+.Vue文件+基于类的Vue组件语法不起作用。）
此外，无论是网页包还是汇总，都可以使用基于阵列/多目标导出。有关详细信息，请参阅以下链接：

网页：

汇总：
谢谢你的回答，我会先尝试为汇总做我自己的配置，如果我再次陷入困境，如果你没有，我会在这里问mind@KawishBehzad那应该很好。作为一种良好的做法，更新原始问题，而不是使用带有代码段的注释。