CODEWITHSUNDEEP
javascriptnode.jswebpackminifyuglifyjs
manelescuer
manelescuer

Reputation: 856

Webpack not minifying my bundle js

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]"
            }
          }
        ]
      }
    ]
  }
};

Upvotes: 2

Views: 7999

Answers (3)

Rakesh Rawat
Rakesh Rawat

Reputation: 327

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

Upvotes: 0

Wolfgang Stengel
Wolfgang Stengel

Reputation: 2856

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

Upvotes: 0

peteb
peteb

Reputation: 19428

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

Upvotes: 5

Related Questions