开发vue插件-打包生成js文件配置（一）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/heyw886/article/details/82416708

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 我们需要把这段代码注释掉才行。