Catch

Webpack项目自动化部署到阿里云OSS

笔者在开发Vue项目时每次都要重复如下操作

  1. 删除dist目录
  2. yarn build
  3. 删除oss文件
  4. 把dist目录文件上传到oss上

这样拖慢了开发效率,浪费了很多时间在这种无聊的事情上,于是笔者通过一番查找和学习,使用两个webpack插件(clean-webpack-pluginaliyunoss-webpack-plugin)解决了以上问题

clean-webpack-plugin的使用已通过之前的文章 webpack在打包前清理dist目录 讲解过,这里不再赘述

aliyunoss-webpack-plugin插件使用

  1. 首先安装aliyunoss-webpack-plugin插件
yarn add aliyunoss-webpack-plugin -D // 或者使用 npm i aliyunoss-webpack-plugin -D
  1. 修改webpack.prod.conf.js
const AliyunossWebpackPlugin = require('aliyunoss-webpack-plugin') const oss = require('../oss') ... plugins: [ ... // 插入到最后面 new AliyunossWebpackPlugin({ buildPath: 'dist/**', region: oss.region, accessKeyId: oss.accessKeyId, accessKeySecret: oss.accessKeySecret, bucket: oss.bucket, deleteAll: true, generateObjectPath: function(filename, file) { return file.replace(/dist\//, '') }, }) }
  1. 由于笔者不希望oss等隐私信息被上传到git所以吧配置的关键参数设置到一个外部的js文件,在项目目录下创建oss.js(记得在.gitignore文件中加入)
module.exports = { region: '', // eg. oss-cn-hangzhou accessKeyId: '', accessKeySecret: '', bucket: '' }

经过以上步骤,每次只需要yarn build即可自动化完成打包部署等一系列操作