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
        },
        press: {
          screw_ie8: true
        },
        ments: 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]"
            }
          }
        ]
      }
    ]
  }
};

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
        },
        press: {
          screw_ie8: true
        },
        ments: 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]"
            }
          }
        ]
      }
    ]
  }
};

• javascript
• node.js
• webpack
• minify
• uglifyjs

Share Improve this question Follow asked May 2, 2017 at 16:13 manelescuermanelescuer 85611 gold badge1010 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

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

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',
};

// mand NODE_ENV=production webpack