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

我和Webpack 4也有这个问题。升级到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