Webpack GZip Compression Creating many bundles/.gz files instead of 1 entire bundle? - npm

Question

I'm playing around with gzip compression for building out my react project (It's a full stack application) when I run the build script with npm I get no errors but in the process it spits me back around 10 bundles with 10 .gz file extensions instead of one and I'm not sure why?
Here is my code:
Production Webpack
const webpack = require("webpack");
const path = require("path");
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
entry: ["babel-polyfill", __dirname + "/src/index.js"],
output: {
path: __dirname + "/public",
filename: "bundle.js",
publicPath: "/"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
query: {
presets: ["react", "env", "stage-0"]
}
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
},
plugins: [
new CompressionPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
minRatio: 0.8,
threshold: 10240
}),
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production")
})
]
};
NPM Build Script
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"client": "webpack-dev-server --port 3312 --progress --color --profile --config webpack.development.config.js --mode development --hot",
"clean": "rm -rf build public/bundle.js",
"server": "nodemon server/main.js",
"sass": "node-sass -w public/assets/scss -o public/assets/css/ --recursive",
"dev": "concurrently \"npm run server\" \"npm run sass\" \"npm run client\"",
"prod": "npm run clean && webpack --config webpack.production.config.js --mode production --progress --colors --profile"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"aws-sdk": "^2.373.0",
"base-64": "^0.1.0",
"body-parser": "^1.18.3",
"cookie-parser": "^1.4.3",
"cors": "^2.8.5",
"data-tip": "0.0.52",
"express": "^4.16.4",
"file-type": "^10.6.0",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"mysql": "^2.16.0",
"nodemailer": "^4.7.0",
"nodemailer-juice": "^1.0.1",
"paypal-rest-sdk": "^1.8.1",
"react": "^16.6.3",
"react-bootstrap": "^0.32.4",
"react-ckeditor-component": "^1.1.0",
"react-confirm-alert": "^2.0.7",
"react-dom": "^16.6.3",
"react-js-pagination": "^3.0.2",
"react-loadable": "^5.5.0",
"react-router-dom": "^4.3.1",
"react-s3-uploader": "^4.8.0",
"read-chunk": "^3.0.0",
"sha256": "^0.2.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"browser-sync": "^2.26.3",
"browser-sync-webpack-plugin": "^2.2.2",
"compression-webpack-plugin": "^2.0.0",
"concurrently": "^4.1.0",
"css-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.27.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
Screenshot of the output:

Answer 1

This is because you are using Webpack 4, and it comes with automatic code-splitting. You can read how to configure it here:
https://webpack.js.org/guides/code-splitting/