Webpack 4 Issues with config.prod.js

[vip3rousmango]

With webpack 4 out, there are some config.prod.js file issues.

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
   -> Options affecting the normal modules (`NormalModuleFactory`).

With webpack updating often, any chance of an updated config and how to handle the module: { loaders: [] } issue? :smile:

For splitChunks and UglifyJsPlugin I removed the original reference and updated it to:

  optimization: {
    splitChunks: {
      cacheGroups: {
        // disables the default definition of these cache groups
        vendors: false,
        default: false
      }
    },
    minimizer: [
      new UglifyJsPlugin({ /* your config */ })
    ]
  }

Now my full webpack.config.prod.js file looks like:

import webpack from 'webpack';
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import WebpackMd5Hash from 'webpack-md5-hash';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

export default {
  resolve: {
    extensions: ['*', '.js', '.jsx', '.json']
  },
  devtool: 'source-map',
  entry: {
    vendor: path.resolve(__dirname, 'src/vendor'),
    main: path.resolve(__dirname, 'src/index')
  },
  target: 'web',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].[chunkhash].js'
  },
  plugins: [
    // Global loader configuration
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false,
      noInfo: true // set to false to see a list of every file being bundled.
    }),

    // Generate an external css file with a hash in the filename
    new ExtractTextPlugin('[name].[contenthash].css'),

    // Hash the files using MD5 so that their names change when the content changes.
    new WebpackMd5Hash(),

    // Create HTML file that includes reference to bundled JS.
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      },
      inject: true,
      // Properties you define here are available in index.html
      // using htmlWebpackPlugin.options.varName
      trackJSToken: 'INSERT YOUR TOKEN HERE'
    })
  ],
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader']},
      {test: /\.css$/, loader: ExtractTextPlugin.extract('css-loader?sourceMap')}
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        // disables the default definition of these cache groups
        vendors: false,
        default: false
      }
    },
    minimizer: [
      new UglifyJsPlugin({ /* your config */ })
    ]
  }
};

[coryhouse]

Hi - Yep, common question. I've shown how to update the final demo to use the latest versions, including Webpack 4 here. Happy coding!

[vip3rousmango]

Sorry! Just noticed the Webpack 4 config commit. Thanks!!