How to zip files with WebPack 5

Have you ever come into a situation where you must copy some project files into a separate folder and zip them?

Here's how I did it in my React project...

Install dependencies

As always you will need several dependencies.

npm install --save zip-webpack-plugin webpack-cli copy-webpack-plugin

zip-webpack-plugin is a plugin for creating a zip file with all desired files.

copy-webpack-plugin is a plugin for copying desired files into a specific directory before zipping.

Project file structure

To be clear, for the purposes of this tutorial I have just created a react project boilerplate by:

create-react-app zipping-with-webpack

webpack zipping initial project structure

You can see that I put some dummy images inside the images/ directory. The end goal is to make a script that will copy all images from there and make a zip from them.

So let's finally do it!

Create a webpack file for zipping

I've chosen a way where I create a separate webpack file that will have one purpose only - copy and zip.

Here's the content...

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
var ZipPlugin = require('zip-webpack-plugin');

module.exports = (env) => {
    return {
        entry: { },
        output: {
            filename: `[name]/[name].js?v=${Date.now()}`,
            path: path.resolve(__dirname, `zip_files/source`),
            publicPath: '/',
        },
        plugins: [
            new CopyPlugin({
                patterns: [
                    {from: 'src/images/**', to: 'source/images/[name][ext]'},
                ],
            }),
            new ZipPlugin({
                path: './',
                filename: `images.zip`,
                extension: 'zip',
                fileOptions: {
                    mtime: new Date(),
                    mode: 0o100664,
                    compress: true,
                    forceZip64Format: false,
                },
                zipOptions: {
                    forceZip64Format: false,
                },
            })
        ]
    };
};

You are probably experienced a bit with Webpack so you know that plugins are an array in which you put all the plugins that you want.

You know that one of the main features of webpack is plugins, right?

In the code above, you can see only two plugins - one for copying and one for zipping.

Update the package.json scripts section

Here's how it looks in my script section inside package.json.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "zip": "./node_modules/.bin/webpack --config ./zipping.config.js --mode production"
  },

You can see that I added a new script "zip" that runs the webpack but during the build process, it uses zipping.config.js that we've just created.

This means that we can run:

npm run zip

And here's what will be created after this command...

See how the zip_files folder is created? You can also see the source file with copied images and the images.zip.

You don't need to create a source folder like me, but often you want to have zip and the latest source files, so this is a better practice.