Смущает, когда упаковываете компонент с помощью веб-пакета и публикуете его

Question

я сделал vue компонентенет. Я упаковал его с помощью webapck и опубликовал на npm.

webpack.config.js

module.exports = {
    ...
    output:{
       path: path.resolve(__dirname, './dist'),
       filename: '[name].js',
       library: 'zw-drag-resize',
       libraryTarget: 'umd'
    }
    ...

}

package.json

{
   ...
   "main": "dist/index.js",
   ...
}

---

Теперь я import это в моем другом проекте, как показано ниже, он работает хорошо.

import ZwDrag from 'zw-drag-resize'
or
imort zwDrag from 'zw-drag-resizw/dist/index.js'

Но когда я копирую целевой файл моего компонента dist/index.js в папку проекта и использую его следующим образом.

import zwDrag from './index.js'

//throw an error while webpack compiling
//export 'default' (imported as 'ZwDrag') was not found in './index'

Затем я просмотрел файл index.js, он похож на содержимое ниже

//The code is from webpack's offical website, my code is similar

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else if(typeof exports === 'object')
    exports['MyLibrary'] = factory();
  else
    root['MyLibrary'] = factory();
})(typeof self !== 'undefined' ? self : this, function() {
  return _entry_return_;
});

И документ веб-пакета говорит:

libraryTarget: "umd" - это выставляет вашу библиотеку под все модули определения, что позволяет работать с CommonJS, AMD и как глобальный переменная. Взгляните на UMD Repository, чтобы узнать больше.

Я знаю, что упаковал свой компонент с umd, и я использую его с ES2015's import, поэтому выдает ошибку.

Но почему это удачно, когда я использую его как пакет npm, как показано ниже?

import ZwDrag from 'zw-drag-resize'
or
imort zwDrag from 'zw-drag-resizw/dist/index.js'

Что делает npm, чтобы заставить его работать? Кто-нибудь может объяснить это для меня?