我们在实际开发中经常会遇到版本不停迭代，然后我们需要把webpack打包好的文件上传出到服务器，这个是比较麻烦的，今天我给大家分享一个在vue项目中通过运行npm run build 生成打包好的文件后直接上传服务器，不要我们每次都手动拷贝。
这个方案的思路是我们自己写一个的webpack的插件，在打包完成的时候把生成的文件名和数据通过post请求上传服务器，服务器获取到数据和文件名，重新生成文件到网站的目录下，我这边用node搭建的一个资源服务器.
(1)写我们的webpack插件
在UplodeFileWebpackPlugin类中定义apply函数，在函数内部我们注册emit事件，这个事件是生成资源到 output 目录之前调用，在回调函数中我们可以获取到文件名和文件里面的内容，然后调用upload函数上传文件，需要注意的是在函数后面一定要调用callback，不然webpack不知道你什么执行完成就会卡在哪里.
(2)在vue.config.js中配置我们的webpack插件
在vue.config.js中有一个configureWebpack选项可以是一个对象或者是一个函数，在函数中我们判断在生产环境触发这个插件。
(3)使用nodejs搭建一个服务
在搭建服服务器的时候我们需要在启动的时候加下面的代码，因为我在上传的时候遇见了http大小限制的问题
app.use(bodyParser.json({limit: '10mb'}));
app.use(bodyParser.urlencoded({limit: '10mb', extended: true}));
在unploadFile中我们首先先确定我们的网页保存的路径，然后自己重新定位一个dist路径，我是保存在当前目录下了，然后在创建需要用到的目录(dist,img,css,js),图片的是不同的我们需要解析里面的buffer，如果是图片文件content是一个对象，里面有type,data两个字段，data是数组所有需要解析里面的buffer，然后写入对应的文件就可以了。
到这里这个功能基本就实现了，我也是一个初学者，有什么不对的地方大家一起讨论。
觉得本文对你有帮助，添加公众号[自学前端之路]