to-zip-webpack-plugin

一个简单易用的 webpack 压缩插件，在打包后可以自动对webpack配置的output.path进行zip/tar压缩,并且可以自定义压缩源、生成压缩日志、自动生成多种类型的唯一文件名

安装

NPM : https://www.npmjs.com/package/to-zip-webpack-plugin

1npm i --save-dev to-zip-webpack-plugin

使用

webpack.config.js

1const ToZipWebpackPlugin = require('to-zip-webpack-plugin')
2module.exports = {
3  entry: 'index.js',
4  output: {
5    path: __dirname + '/dist',
6    filename: 'index_bundle.js'
7  },
8  plugins: [
9    new ToZipWebpackPlugin()
10  ]
11}

支持零配置，默认对webpack打包完成后output.path进行压缩到path同级目录。

例子

同时支持多个可选参数：

1    plugins: [
2      new ToZipWebpackPlugin({
3        deleteFileList: ["./last.zip", "/dist"], //在压缩完成后删除deleteFileList中的文件夹或目录
4        format: "zip", //要压缩的格式 支持zip、tar  默认zip
5        fileName: "test", //压缩文件名 默认自动生成时间字符串文件名
6        defaultFileName: "uuid", //当不设置fileName 时会自动生成文件名，支持uuid  timestamp time
7        archive: {
8          //自定义压缩源/目标，设置archive时以下参数必填
9          source: __dirname + "/other.config-test.js", //要压缩的文件/目录的路径
10          targetDir: __dirname, //压缩文件最终的输出目录
11          fileName: "bundlejs", //压缩的文件名
12        },
13        log: true, //是否记录压缩操作日志到当前目录ToZipWebpackPlugin.log
14        zlibLevel: 9, //设置压缩等级、默认9
15      }),
16    ]

打包后看到ToZipWebpackPlugin.log以下输出说明压缩完成：

1[2022-05-14T20:05:52.028] [INFO] ToZipWebpackPlugin - Compression finish ！ -  /Users/wsp/vuetest/bundlejs.zip  Size: 0.00M
2[2022-05-14T20:05:52.171] [INFO] ToZipWebpackPlugin - Compression finish ！ -  /Users/wsp/vuetest/497bfd78-7da6-45ab-97b3-0d126981bfcd.zip  Size: 0.21M

设置defaultFileName会自动生成唯一的压缩文件名支持uuid、时间戳、时间字符串 格式yyyymmddhhMMss:

1    plugins: [
2      new ToZipWebpackPlugin({
3        format: "tar", //要压缩的格式 支持zip、tar
4        defaultFileName: "timestamp", //当不设置fileName 时会自动生成文件名，支持uuid  timestamp time
5        zlibLevel: 3, //设置压缩等级
6        log:true
7      }),
8    ],

ToZipWebpackPlugin.log

defaultFileName: "timestamp"

[2022-05-14T20:44:56.946] [INFO] ToZipWebpackPlugin - Compression finish ！ -  /Users/wsp/vuetest/1652532292483.tar  Size: 0.68M

defaultFileName: "time"

[2022-05-14T20:45:47.496] [INFO] ToZipWebpackPlugin - Compression finish ！ -  /Users/wsp/vuetest/20220514204542.tar  Size: 0.68M

内部压缩操作发生在webpack的compiler引擎afterEmit钩子，hook详情：https://webpack.docschina.org/api/compiler-hooks/#afteremit