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

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

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

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

clean-webpack-plugin的使用
webpack在打包前清理dist目录

npm install clean-webpack-plugin --save-dev 
或者yarn add clean-webpack-plugin -D 

修改webpack
我创建的是vue项目，需要修改webpack.prod.conf.js文件

const CleanWebpackPlugin = require('clean-webpack-plugin')

plugins: [
    new CleanWebpackPlugin(),
    ...
    ]

aliyunoss-webpack-plugin插件使用

1. 首先安装aliyunoss-webpack-plugin插件

yarn add aliyunoss-webpack-plugin -D
 或者使用 npm i aliyunoss-webpack-plugin -D` 

2. 修改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\//, '')
      },
    })
}

3. 不希望oss等隐私信息被上传到git所以吧配置的关键参数设置到一个外部的js文件，在项目目录下创建oss.js(记得在.gitignore文件中加入)

module.exports = {
  region: '', // eg. oss-cn-hangzhou
  accessKeyId: '',
  accessKeySecret: '',
  bucket: ''
} ```