Webpack is not minimiziing my JavaScript files in production

Question

Im new to react.js and currently working on a react.js project which runs 100% ok with development environment without any errors. After i build the project in production mode it will not minify my javascript files. But my scss files are get minified.

const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production",
  entry: {
    main: "./src/index.js",
    vendor: "./src/vendor.js",
  },
  output: {
    filename: "[name].[contentHash].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ["html-loader"],
      },
      {
        test: /\.(svg|png|jpg|gif)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[name].[hash].[ext]",
            outputPath: "imgs",
          },
        },
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      new OptimizeCssAssetsPlugin(),
      new HtmlWebpackPlugin({
        template: __dirname + "/app/index.html",
        minify: {
          removeAttributeQuotes: true,
          collapseWhitespace: true,
          removeComments: true,
        },
      }),
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: "[name].[contentHash].css" }),
    new CleanWebpackPlugin(),
  ],
};

Please someone help me to solve this problem and sorry for my bad English.

Answer 1

The default javascript minimizer plugin for webpack is TerserPlugin. When you setting minimizer attribute under the optimizaton, it will override the default values provided by webpack itself. To overcome this problem add TerserPlugin to your webpack.config.js file and pass it to the minimizer attribute.

const TerserPlugin = require("terser-webpack-plugin");

optimization: {
  minimizer: [
    new TerserPlugin(),
    new OptimizeCssAssetsPlugin(),
    new HtmlWebpackPlugin({
      minify: {
        removeAttributeQuotes: true,
        collapseWhitespace: true,
        removeComments: true,
      },
    }),
  ],
},

Answer 2

It seems like you only have minimization for your scss files, if you want to minify your javascript files aswell, you'll need a plugin such as Uglify, you just import it on the top and add it to the optimization.minimizer like it says in plugin page example:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
module.exports = {
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
};

Answer 3

MiniCssExtractPlugin will extract your CSS into a separate file and It creates a CSS file per JS file which contains CSS. It won't minify your CSS files.

Import css-minimizer-webpack-plugin for minification. You can configure minification based on your environment.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { getIfUtils } = require('webpack-config-utils')
const {ifProduction, ifNotProduction} = getIfUtils(process.env.NODE_ENV)

module.exports = {
  module: {
    loaders: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  optimization: {
    minimize: ifProduction(true, false),
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
};