使用Webpack打包组件并将其发布时感到困惑

Question

我做了一个vue组件。我将其与webapck打包并发布到npm。

webpack.config.js

<img src={require('./logo.svg')}></img> 

package.json

 getImage = (url) => {
     return require(`${url}`)
   }

  <img src={this.getImage(url)}></img>

---

现在，我module.exports = { ... output:{ path: path.resolve(__dirname, './dist'), filename: '[name].js', library: 'zw-drag-resize', libraryTarget: 'umd' } ... } 在下面的另一个项目中，它运行良好。

{
   ...
   "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'

Webpack的文档说：

  

libraryTarget：“ umd”-这将您的库暴露在所有模块下   定义，使其可以与CommonJS，AMD以及全球   变量。查看UMD存储库以了解更多信息。

我知道我将组件与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_; }); 一起使用， 因此会引发错误。

但是为什么成功，当我将其用作如下所示的npm软件包时？???

umd

npm可以做什么使其起作用？谁能为我解释一下？