webpack打包自动上传到指定目录

webpack打包生成一个静态目录文件,可以通过webpack将打包的文件移到指定目录文件进行提交,自动化构建上传

编写一个webpack插件

build.after.js

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
let fs = require('fs-extra');
const process = require('process');
const exeShell = require('./shell');



class ConsoleLogOnBuildWebpackPlugin {

    constructor(staticDir,staticPath,remoteConfig) {
        this.staticDir = staticDir || 'vue'; //指定文件名
        this.staticPath = staticPath || 'E:/blog/my_vue/disttest';//指定目录
        if(remoteConfig) {
            this.remoteConfig = remoteConfig;
        } else {
            this.remoteConfig = {
                "username":"xxx",
                "password":"xxx",
                "host":"xxx",
                "port":"xxx"
            };
        }
    }

    apply(compiler) {

        compiler.hooks.run.tap(pluginName, compilation => {
            console.log("webpack 构建过程开始！");
        });

        compiler.hooks.done.tap(pluginName,compilation=>{
            let distPath = compilation.compilation.outputOptions.path;
            console.log(distPath);
            console.log("webpack 构建结束,自动复制代码");

            var buildCDN = ()=>{
                console.log('开始处理cdn文件...');
                process.chdir(this.staticPath);
                return exeShell("git",['pull','--rebase','origin','master']).then(()=>{
                    console.log('更新文件成功...');
                    return fs.remove(this.staticPath + '/' + this.staticDir)
                }).then(() => {
                    return fs.copy(distPath, this.staticPath + '/' + this.staticDir);
                }).then(() => {
                    console.log('文件复制成功!');
                    console.log('提交静态文件...');
                    process.chdir(this.staticPath);
                    return exeShell('git', ['add', '.'])
                }).then(function () {
                    console.log('add success');
                    return exeShell('git', ['commit', '-m', 'vue-build dev_test']);
                }).then(function () {
                    console.log('commit success ');
                    return exeShell("git", ['pull', '--rebase', 'origin', 'master']);
                }).then(function () {
                    console.log('pull success ');
                    return exeShell("git", ['push', 'origin', 'master']);
                }).then(function () {
                    console.log('push success ');
                })
            };

            buildCDN();
        });
    }
}

module.exports = ConsoleLogOnBuildWebpackPlugin;

shell.js

function exeShell(path,params) {
    return new Promise(function (res,rej) {
        var spawn = require('child_process').spawn;
        var addProcess = spawn(path,params);

        var resultBuffer = [];
        addProcess.stderr.on('data',function (data) {
            resultBuffer.push(data);
        });
        addProcess.stdout.on('data',function (data) {
            resultBuffer.push(data);
        });
        addProcess.on('exit',function () {
            res(Buffer.concat(resultBuffer).toString())
        })
    });
}
module.exports = exeShell;

vue.config.js配置使用

const BuildAfter = require('./src/build/build.after');

  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugin('build-after').use(BuildAfter, ['', '', '']);
    }
  },

路径根据自己的目录定义,实现一个简单的自动化构建