Webpack not minifying my bundle js

Question

I'm now bundling my first project with webpack, everything works as expected except webpack is not minifying my bundle.min.js code.

I'm pretty sure I'm doing something wrong, but can't spot the mistake.

Any help would be appreciated. Thanks in advance.

Here I go w/ my webpack.config.js

var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  context: __dirname + "/public",
  entry: './app.js',
  output: {
      path: __dirname + '/dist',
      filename: "bundle.min.js"
  },
  plugins: [
      new webpack.ProvidePlugin({
         $: "jquery",
         jQuery: "jquery"
     }),
     new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: true
    }),
     new webpack.optimize.UglifyJsPlugin({
       beautify: false,
        mangle: {
          screw_ie8: true,
          keep_fnames: true
        },
        compress: {
          screw_ie8: true
        },
        comments: false
    }),
     new ExtractTextPlugin("bundle.min.css"),
     new OptimizeCssAssetsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              hash: "sha512",
              digest: "hex",
              name: "./img/[hash].[ext]"
            }
          },
          {
            loader: "image-webpack-loader",
            query: {
              mozjpeg: {
                progressive: true,
              },
              gifsicle: {
                interlaced: false,
              },
              optipng: {
                optimizationLevel: 4,
              },
              pngquant: {
                quality: '75-90',
                speed: 3,
              },
            },
          }
        ]
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "./fonts/[name].[ext]"
            }
          }
        ]
      }
    ]
  }
};

Answer 1

Webpack supports minification out of the box. By including the -p flag when running webpack it will minify your code for you. The -p flag is a shortcut for --optimize-minimize flag.

Run: webpack -p

Answer 2

I had this problem as well with Webpack 4. It went away after upgrading to Webpack 4.28.2.

Answer 3

I was also facing the same issue. It started working after providing mode config value as production.

module.exports = {
    // webpack config
    mode: process.env.NODE_ENV || 'development',
};

// command NODE_ENV=production webpack