Why is my final bundle.js 2MB?

Question

JavaScript

Hey! I don’t know much about webpack configuration, I don’t even know how to google correctly, but my bundle weighs a catastrophic amount, what could be wrong, what am I missing?

const path = require("path");
const fs = require("fs");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");


const config = {
  entry: ["./src/js/index.js", "./src/scss/style.scss"],
  output: {
    filename: "./js/bundle.js",
  },
  devtool: "source-map",
  mode: "production",
  optimization: {
    minimizer: [
      new TerserPlugin({
        sourceMap: true,
        extractComments: true,
      }),
    ],
  },
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        include: path.resolve(__dirname, "src/scss"),
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {},
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              url: false,
            },
          },
          {
            loader: "postcss-loader",
            options: {
              sourceMap: true,
              postcssOptions: {
                plugins: () => [
                  require("cssnano")({
                    preset: [
                      "default",
                      {
                        discardComments: {
                          removeAll: true,
                        },
                      },
                    ],
                  }),
                ],
              },
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      }
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "./css/style.bundle.css",
    }),
    new CopyPlugin({
      patterns: [
        {
          from: "./src/fonts",
          to: "./fonts",
        },
        {
          from: "./src/favicon",
          to: "./favicon",
        },
        {
          from: "./src/img",
          to: "./img",
        },
      ],
    })
  ]
};

module.exports = (env, argv) => {
  if (argv.mode === "production") {
    config.plugins.push(new CleanWebpackPlugin());
  }
  return config;
};

Here is my package.json:

{
  "name": "epsilon",
  "version": "1.0.0",
  "description": "Epsilon theme",
  "main": "src/index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "watch": "webpack --mode=development --watch",
    "build": "webpack --mode=production",
    "build:watch": "webpack --mode=production --watch"
  },
  "dependencies": {
    "inputmask": "^5.0.5",
    "jquery": "^3.6.0",
    "jquery-ui": "^1.12.1",
    "jquery-ui-bundle": "^1.12.1-migrate",
    "mapbox-gl": "^2.3.1",
    "scrollmagic": "^2.0.8",
    "slick-carousel": "^1.8.1",
    "smooth-scrollbar": "^8.6.2",
    "swiper": "^6.7.5",
    "three": "^0.128.0"
  },
  "devDependencies": {
    "@types/mapbox-gl": "^2.3.3",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.4.1",
    "css-loader": "^4.3.0",
    "css-minimizer-webpack-plugin": "^1.2.0",
    "cssnano": "^4.1.10",
    "gsap": "^3.7.1",
    "imagemin-webpack-plugin": "^2.4.2",
    "medium-editor": "^5.23.3",
    "mini-css-extract-plugin": "^0.11.3",
    "moment": "^2.29.1",
    "node-sass": "^4.14.1",
    "postcss": "^8.2.15",
    "postcss-loader": "^4.3.0",
    "prettier": "^2.3.0",
    "quill": "^1.3.7",
    "raw-loader": "^4.0.2",
    "sass-loader": "^10.2.0",
    "terser-webpack-plugin": "^4.2.3",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  }
}

Answer 1

This is all moment.js, you must either switch to luxon, or cut the locales with a crutch https://stackoverflow.com/questions/25384360/how-t...

Answer 2

https://github.com/webpack-contrib/webpack-bundle-...