開發vue插件-打包生成js文件配置（一）

vue腳手架搭建網上有很多教程，並且在以前我的一篇博客中記錄了vue-cli腳手架安裝和使用的步驟，在這裏我就不多加描述了。如果小夥伴們有興趣可以看一下vue-cli搭建使用的這篇文章：https://mp.csdn.net/postedit/78109675。

好了廢話不多說了，接下來我們聊聊插件開發的一些問題：

1、對於vue插件開發小夥伴們可以看一下vue官網上的介紹vue插件開發官網。

2、vue-cli腳手架開發vue插件的結構：

在這裏面我們可以看到vue-cli腳手架的結構，這個和我們在後面對webpack配置修改有一定的幫助，如果我直接把配置放上去應該會看不明白。

3、將開發的插件打包成js文件配置

現在vue-cli腳手架webpack打包生成的文件都是放到一起的，想要單獨打包生成js文件插件就需要我們對vue-cli腳手架配置進行改造一下，下面是對webpack.base.conf.js文件修改

const glob = require("glob") //引入glob

const files = glob.sync('./packages/*/index.js');
const newEntries = {};

files.forEach(function(f){
  var name = /.*\/(packages\/.*?\/index)\.js/.exec(f)[1]; // 得到packages/test這樣的文件名
  name = name.replace('/index','')
  newEntries[name] = f;
});
// 配置js文件
newEntries.index ='./src/main.js'

 接下來我們要配置一下入口文件

entry: newEntries,

這樣我們打包生成的文件。

但是你會發現打包生成的並不是這樣的，因爲我們還有一處的配置沒有註釋掉：在webpack.prod.conf.js文件中有這個一個配置 webpack.optimize.CommonsChunkPlugin 我們需要把這段代碼註釋掉纔行。