Let’s create project directory, init npm package and install JSZip as dependancy. We are also going to use webpack as bundling tool. More details for the webpack can find in the webpack official website. In this tutorial, we will not dive into webpack in detail as the purpose of this article is to emphasize on compressing the files.
npm init -y
npm i jszip
npm i webpack webpack-cli webpack-dev-server --save-dev
Next, we create the webpack configuration file in root project directory. The webpack will based on the configuration file and look for index.js, bundled and output as main.js to the dist folder.
We also need to add script to our package.json as follow in order to start our dev server using npm script:
Now, we can start up the webpack dev server using npm start. Once started, navigate to http://localhost:9000 and try select multiples file to see the result.