利用webpack打包自己的第一个Vue组件库

　　先说一下这篇文章的诞生原因。我们有一个这样的项目，类似或者说就是一个仪表板-Dashboard，其中的各个部分可能不是一个部门写的……我们需要提供拖拽布局（大小和位置）和展示的能力。要实现这样一个功能，想了好几种方式实现（后面的笔记详说），最后选择了这篇笔记的实现方式：写整个项目的，算是使用方；写每个组件的，算是vue类库（UI、组件库）的提供方。之后就是我们如何使用这些类库的问题了，就像我们使用element-ui一样，这样说就明白了吧！这里不说父子之间如何通信以及如何使用类库，只说如何打包类库。

　　之前总是使用别人的类库了，没有自己写过，今天就着这个机会研究了有了一下，demo算是跑通了，深入的就需要之后慢慢学习了。

　　开始还是看了一下element-ui是如何将所有的组件打包到一个JS文件，并且可以CDN方式使用的，发现和我们写一个单独的.vue单文件组件没有什么区别，主要是webpack的output和入口文件的写法有些不同，其他的都大同小异，先看一下output

var path = require('path');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    mode: 'development', // production|development  // https://segmentfault.com/a/1190000013712229
    entry: "./index.js",
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'ddztestlib01.js',
        library: 'ddztestlib01',
        libraryTarget: 'umd',
        libraryExport: 'default',
        umdNamedDefine: true,
        // globalObject: `(typeof self !== 'undefined' ? self : this)`, // https://stackoverflow.com/questions/49111086/webpack-4-universal-library-target
        globalObject: 'typeof self !== \'undefined\' ? self : this' // element-ui 写法
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {
            test: /\.css$/,
            loader: 'css-loader'
        }, {
            test: /\.less$/,
            loader: 'style-loader!css-loader!less-loader'
        }]
    },
    devtool: "source-map",
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

webpack.config.js