先说一下这篇文章的诞生原因。我们有一个这样的项目，类似或者说就是一个仪表板-Dashboard，其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局（大小和位置）和展示的能力。要实现这样一个功能，想了好几种方式实现（后面的笔记详说），最后选择了这篇笔记的实现方式：写整个项目的，算是使用方；写每个组件的，算是vue类库（UI、组件库）的提供方。之后就是我们如何使用这些类库的问题了，就像我们使用element-ui一样，这样说就明白了吧！这里不说父子之间如何通信以及如何使用类库，只说如何打包类库。
之前总是使用别人的类库了，没有自己写过，今天就着这个机会研究了有了一下，demo算是跑通了，深入的就需要之后慢慢学习了。
开始还是看了一下element-ui是如何将所有的组件打包到一个JS文件，并且可以CDN方式使用的，发现和我们写一个单独的.vue单文件组件没有什么区别，主要是webpack的output和入口文件的写法有些不同，其他的都大同小异，先看一下output
webpack.config.js这里主要说一下，libraryTarget、libraryExport、umdNamedDefine和globalObject
1、libraryTarget：打包类库的发布格式，这里使用UMD，其他选项不解释（其实是……）
2、libraryExport：这个选项同样不知道干什么的，但是我遇到了一个问题就是开始没有添加这个选项（虽然看了element-ui的打包，但是我给过滤了），导致使用的时候发现有双层的“default”，因为不是很了解，所以查了一些资料先看看，却发现和这篇文章说的一样：webpack组织模块打包Library的原理及实现，后来发现该文中使用的选项过期了，之后还是又看了一遍element-ui 才搞定，这一大圈
3、umdNamedDefine：这个还是同上，但是添加和不添加这个选项比较一下生成文件你就知道了
4、globalObject：这个是真不知道了，但是在stackoverflow中无意发现说这是个Bug，地址：https://stackoverflow.com/questions/49111086/webpack-4-universal-library-target
现在看来webpack配置文件处理output某些属性和我们正常开发没有什么区别，下面看一下他的入口文件：
index.js
入口文件就不解释了，在里面我觉得解释的够清楚了，还有类库中包含的组件这里就不说了，也没有什么好说的就是“Hello World”。
最后在附上使用类库的代码：
View Code
这篇文章就到这里吧！有写的不对的地方，敬请指正，非常感谢！