目录

1. webpack中 plugins是如何执行得
2. webpack得生命周期
3. 自动发布到七牛云

1.webpack中 plugins是如何执行得
webpack得核心文件是 compiler.js，======webpack/lib/compiler.js.

里面搜索plugins 我们可以发现，在350行左右 new 了一个compiler，然后判断是否存在plugins ，有得话就循环调用他得apply方法。

知道了这个以后我们可以简单得写一个插件

新建一个文件夹 plugins,里面新建一个DonePlugins.js

class DonePlugins {
    apply(compiler) {
        // done是webpack 得编译完成周期
        compiler.hooks.done.tap("DonePlugins", function (stats) {
            console.log("编译完成！！");
        });
    }
}

module.exports = DonePlugins;

新建一个EmitPlugins .js

class EmitPlugins {
    apply(compiler) {
        // emit是webpack 得发送文件得周期
        compiler.hooks.emit.tapPromise("EmitPlugins", function (compilation) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("文件发射！！");
                    resolve();
                }, 1000);
            });
        });
    }
}

module.exports = EmitPlugins;

配置文件 webpack-config.js

顶部引入
let DonePlugins = require("./plugins/DonePlugins");
let EmitPlugins = require("./plugins/EmitPlugins");
plugins: [new DonePlugins(), new EmitPlugins()],

2.webpack得生命周期
上面代码中得生命周期，我们可以看下compiler.js
hooks中key值就是对应得生命周期，value值是对应得一个个钩子（有同步钩子，异步钩子，同步串行钩子等）。原理可以参考我上上篇tapable实现原理。

简单得运用就是，在插件中,xxx没什么用 ，tap是注册得事件名，还有tapPromise等
compiler.hooks.done.tap(‘xxx’,function(){
console.log(“111111”)
})

插件中写上这么一个方法后，webpack会在打包过程中针对不同得步骤 call()执行对应得周期。
this.hooks.done.call();

3.自动发布到七牛云
新建一个
UploadPlugin.js

// 自动发布到七牛云  
let path = require("path");
let qiniu = require("qiniu");
class UploadPlugin {
    constructor(options) {
        // 下面得步骤 参考七牛云 node.js 上传文件文档
        //https://developer.qiniu.com/kodo/1289/nodejs
        let {
            bucket = "",
            domain = "",
            accessKey = "",
            secretKey = "",
        } = options;
        let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
        var putPolicy = new qiniu.rs.PutPolicy({ scope: bucket });
        this.uploadToken = putPolicy.uploadToken(mac);
        var config = new qiniu.conf.Config();
        this.formUploader = new qiniu.form_up.FormUploader(config);
        this.putExtra = new qiniu.form_up.PutExtra();
    }

    apply(compiler) {
        // 文件发射完成之后
        compiler.hooks.afterEmit.tapPromise("UploadPlugin", (compilation) => {
            // 打包得资源compilation.assets
            let assets = compilation.assets;
            let promise = [];
            Object.keys(assets).forEach((filename) => {
                // 返回得是个promise
                promise.push(this.upload(filename));
            });
            return Promise.all(promise);
        });
    }

    upload(filename) {
        return new Promise((reslove, reject) => {
            // 获取文件位置  ../dist是相对于当前文件位置
            let localFile = path.resolve(__dirname, "../dist", filename);
            // 文件上传  七牛node.js 上传文件文档中的方法
            this.formUploader.putFile(
                this.uploadToken,
                filename,
                localFile,
                this.putExtra,
                function (respErr, respBody, respInfo) {
                    if (respErr) {
                        reject(respErr);
                        //   throw respErr;
                    }
                    if (respInfo.statusCode == 200) {
                        reslove(respInfo);
                        //   console.log(respBody);
                    } else {
                        //   console.log(respInfo.statusCode);
                        //   console.log(respBody);
                    }
                }
            );
        });
    }
}

module.exports = UploadPlugin;

配置文件

let UploadPlugin = require("./plugins/UploadPlugin"); //手写个

// 自动发布到七牛 下面是七牛要求得参数
        new UploadPlugin({
            bucket: "webpack-test", //哪个资源
            domain: "qnj5ptwti.hn-bkt.clouddn.com", //哪个域名
            accessKey: "znjuYiwwUnxelPF734ICSFmXMDJlzX994VY8IetM", //key
            secretKey: "rAeL63jqgYQN76ttYW__7jsHG4nm46V8Ff-UY47M", //key
        }),

这里说下这4个参数，也是七牛云要牛的，官网登陆 进入 空间管理
bucket: “webpack-test”, //哪个资源
domain: “qnj5ptwti.hn-bkt.clouddn.com”, //哪个域名
accessKey: “znjuYiwwUnxelPF734ICSFmXMDJlzX994VY8IetM”, //key
secretKey: “rAeL63jqgYQN76ttYW__7jsHG4nm46V8Ff-UY47M”, //key

UploadPlugin.js中的逻辑大致就是，在文件发射完成周期内执行自动上传，控制器里面的一些逻辑都是参考七牛 node.js上传文件里的逻辑。 npx webpack上传成功

http://qnj5ptwti.hn-bkt.clouddn.com/index.html 直接访问 报错：{“error”:“download token not specified”}

原因排查：私有 需要token
查文档：

私有空间:
对于私有空间，首先需要按照公开空间的文件访问方式构建对应的公开空间访问链接，然后再对这个链接进行私有授权签名。

公开空间:
对于公开空间，其访问的链接主要是将空间绑定的域名（可以是空间的默认域名或者是绑定的自定义域名）拼接上空间里面的文件名即可访问，标准情况下需要在拼接链接之前，将文件名进行urlencode以兼容不同的字符。

本地跑下 看看能不能访问，可以