Correct way to use minimize javascript in webpack.config.js

Question

I'm following a tutorial about webpack, but it seems that the tutorial is making use of an older version of webpack. I'm trying to minimize the .js files but every time I run npm run webpack I get this error message in the console:

webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

How do I use that config.optimization.minimize ? I've been googling for some time but with no success... What do I need to change in my webpack.config.js?

This is my webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('allstyles.css');

module.exports = {
  entry: './wwwroot/source/app.js',
  output: {
    path: path.resolve(__dirname, 'wwwroot/dist'),
    filename: 'bundle.js'
  },
  plugins: [
    extractCSS,
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default']
    }),
    new webpack.optimize.UglifyJsPlugin()
  ],
  module: {
    rules: [
      {test: /\.css$/, use: extractCSS.extract(['css-loader?minimize'])},
      {test: /\.js$/,//      
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  }
};

package.json:

{
  "name": "WebpackBlogExample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "wbp": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.3",
    "babel-preset-env": "^1.6.1",
    "bootstrap": "^4.0.0-beta.2",
    "css-loader": "^0.28.10",
    "extract-text-webpack-plugin": "^3.0.2",
    "jquery": "^3.3.1",
    "popper.js": "^1.12.9",
    "style-loader": "^0.20.2",
    "uglifyjs-webpack-plugin": "^1.2.2",
    "webpack": "^4.0.1",
    "webpack-cli": "^2.0.9"
  },
  "dependencies": {}
}

score 4 · Accepted Answer · answered Mar 01 '18 at 01:39

4

https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a

If you look at the url it will explain all optimization options.

By default in dev mode webpack 4 won't minimize js, this is to speed up development. As soon as you switch mode to production or use the -p while running webpack it will automatically minimize your JS there is no need for uglifyjs setup anymore in webpack 4.

answered Mar 01 '18 at 01:39

Mick Feller

882
1
8
16

I've just read that the `extract-text-webpack-plugin` is not compatible with `webpack 4` so I'll migrate to `webpack 3` for now, thanks – AlexGH Mar 01 '18 at 01:50
2

Correct. It does work if you upgrade to the alpha version of extract-text-webpack-plugin they are working on it to upgrade it. If i were you and you are starting on a project i would not downgrade to 3 but make it work with the alpha version. It's more difficult later on to upgrade if you have the chance to start from scratch. I'm in that boat right now with a big webpack setup it's not easy to migrate to a new version. Waiting on a few plugins to support webpack 4 now. Good luck! – Mick Feller Mar 01 '18 at 01:52

score 1 · Answer 2 · answered Apr 11 '18 at 06:18

Webpack 4.X and minifying JS

UglifyJSPlugin:

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

...

optimization: {
  minimizer: [
    new UglifyJSPlugin({
      uglifyOptions: { ... }
    })
  ]
}

Other options:

Note that while the UglifyJSPlugin is a great place to start for minification, there are other options out there. Here are a few more popular ones:

[BabelMinifyWebpackPlugin][1]
[ClosureCompilerPlugin][1]

If you decide to try another, just make sure your new choice also drops dead code as described in the tree shaking guide.

source: https://webpack.js.org/guides/production/

Look at: https://stackoverflow.com/a/49767690/6200607

Correct way to use minimize javascript in webpack.config.js

2 Answers2

Webpack 4.X and minifying JS