Webpack学习笔记

# 四.自动发布到七牛云上

  • 首先注册七牛云

https://portal.qiniu.com/signup?code=3lj1zdy4i742a

# 安装

package.json

{
  "name": "2.plugin",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "mini-css-extract-plugin": "^0.5.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  },
  "dependencies": {
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "qiniu": "^7.2.1"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 文件

plugins/UploadPlugin.js

let path = require("path");
let qiniu = require("qiniu");
class UploadPlugin {
  constructor(options) {
    let { bucket = "", domain = "", accessKey = "", secretKey = "" } = options;
    let mac = new qiniu.auth.digest.Mac(accessKey, secretKey );
    let putPolicy = new qiniu.rs.PutPolicy({ scope: bucket });
    this.uploadToken = putPolicy.uploadToken(mac);
    let 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", compliation => {
      let assets = compliation.assets;
      let promises = [];
      Object.keys(assets).forEach(filename => {
        promises.push(this.upload(filename));
      });
      return Promise.all(promises);
    });
  }
  upload(filename) {
    return new Promise((resolve, reject) => {
      let localFile = path.resolve(__dirname, "../dist", filename);
      this.formUploader.putFile(
        this.uploadToken,
        filename,
        localFile,
        this.putExtra,
        function(respErr, respBody, respInfo) {
          if (respErr) {
            reject(respErr);
          }
          if (respInfo.statusCode == 200) {
            resolve(respBody);
          } else {
            console.log(respBody);
          }
        }
      );
    });
  }
}
module.exports = UploadPlugin;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

# 配置

webpack.config.js

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");
let FileListPlugin = require("./plugins/FileListPlugin");
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
let UploadPlugin=require('./plugins/UploadPlugin')
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    publicPath:'http://pplgarg0j.bkt.clouddn.com/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "main.css"
    }),
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new FileListPlugin({
      filename: "list.md"
    }),
    new UploadPlugin({
      bucket:'imgstatic',
      domain:'pplgarg0j.bkt.clouddn.com',
      accessKey:'q5iDsC65UaWs8ni8quwboTq7Yth-4TipXSuiE3Ml',
      secretKey:'KAi4ewk1gSf_UPkS4PyMK-efL7GyIpDN0ESxQsyk'
    })
  ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 打包

npx webpack
1

浏览器查看：http://pplgarg0j.bkt.clouddn.com/index.html

完整代码 (opens new window)

←