Webpack config for publishing vue component into an npm package

Question

here's my main js code for the component

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

can anyone help me with the webpack config? I need to output 4 files from this index.js

1. dist/vlider.umd.js
2. dist/vlider.esm.js
3. dist/vlider.min.js
4. vlider.css

so that it can support multiple entry points in package.json

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

this is my first time dealing with webpack so your help will be greatly appreciated

Answer 1

Webpack does not support esmodule as the output target. You can create commonjs module or umd/iife module.

If you need ESModule as a target then consider using Rollup.js . In general, you should use Rollup when you need to bundle library and Webpack for application bundling. (Note: Rollup is great but TypeScript + .Vue files + Class-based vue component syntax does not work.)

Also, irrespective of Webpack or Rollup, you can use array-based/multiple-targets export. Refer following links for more details:

Webpack: https://webpack.js.org/concepts/targets/#multiple-targets

Rollup: https://rollupjs.org/guide/en#configuration-files