cd vuecli4
npm run serve

function ArraySum(arr=[]) {
    return arr.reduce((pre,cur) => {
        return pre + cur;
    },0)
}

export default {
    ArraySum
}

var path = require('path');

module.exports = {
    entry: {
        'common': './lib/common.js'
    },mode: 'production'),publicPath: './' 对外暴露default属性，就可以直接调用default里的属性
        library: 'testview',1)"> // 指定类库名,主要用于直接引用的方式(比如使用script 标签)
        libraryTarget: 'umd',1)"> 定义打包方式
        globalObject: 'this'true/\.js$/)],exclude: /node_modules/
            }
        ]
    }
}

"build:lib": "webpack --config lib.config.js",

npm i webpack webpack-cli babel-loader -D

import itHeader from './src/header.vue';

itHeader.install = function(Vue) {
    Vue.component(itHeader.name,itHeader);
}

export default itHeader;

<template>
    div class="header-top">
        slot :data="navList">
            div>这是一个头部</slot>
>

script>
    export default {
        name: 'it-headerreturn {
                navList:[
                    {id: 1列表服务一},{id: 2列表服务二}
                ]
            }
        }
    }
style scoped="scoped"
.header-top    {
    height: 60px;
    line-height
    text-align center
    background-color #000066
    color #fff
    font-size 14px
    position fixed
    top0
    left
    width 100%;
}
style>

export )
}

import itHeader from '../../packages/header/index.js';
import * as utilsFns from '../../lib/common.js';

const components = [
    itHeader,utilsFns
]

 方法挂载到Vue原型链上
const install = function(Vue,opts = {}) {
    components.forEach(component =>if (component !== utilsFns) {
            Vue.component(component.name,component);
        } else {
            Object.keys(component).forEach((key) => {
                Vue.prototype['$' + key] = component[key];
            })
        }
    });
}

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
     Object.keys(utilsFns).forEach((key) => {
       Vue.prototype['$' + key] = utilsFns[key];
     })

}

export  {
    version: '1.0.0'内容，如：import itview from '../libdist/test.common.js'，那么类库方法都会绑定到Vue原型链上；
如果是import {itHeader,utilsFns} from '../libdist/test.common.js'，那么类库方法在utilsFns对象上，自己处理

 修改打包配置文件
上面创建的lib.config.js代码修改如下：

);
var VueLoaderPlugin = require('vue-loader/lib/plugin');
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
module.exports = {
    entry: {
        'common': './src/components/index.js''vue-loader'
            },{
                test: /\.js$/'style-loader','css-loader','sass-loader']
            }
        ]
        
    },plugins: [
        new ProgressBarPlugin(),new VueLoaderPlugin()
    ]
}

安装loader、插件
由于是打包vue，所以需要安装vue-loader;vue页面中引入有样式，需要安装style-loader、css-loader,不需要安装sass-loader(初始化项目时已经安装)。

npm i vue-loader style-loader css-loader -D

特别说明，需要在配置文件中添加，如下代码：

 {
  省略代码
 plugins: [
         VueLoaderPlugin()
    ]
}

由于打包支持全部引入以及按需引入，在低版本的vue-cli中需要借助 babel-plugin-component，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

将 .babelrc 添加如下代码：

 "plugins": [
      [
        "component"
        }
      ]
    ]

可参考element-ui官网的按需加载配置说明：https://element.eleme.cn/#/zh-CN/component/quickstart
插件的封装理解可参考：《vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）》

注：当前vue-cli4搭建的项目环境不需要

参考地址

vue cli4.0 快速搭建项目详解
创建自己的library类库包并使用webpack4.x打包发布到npm
让vue-cli3.0 配置简单起来(vue.config.js编结)
10分钟教你快速开发一个vue插件并发布npm
Vue 单组件打包导出到为普通页面可以调用的 JS？