On this page

This guide covers only the major changes that affect end users. For the full picture, see the changelog.

If you are still on Node.js v4 or lower, upgrade your Node.js installation to v6 or higher.

You can find instructions for upgrading Node.js here.

The CLI has moved into its own package, webpack-cli. You must install it before using webpack; see basic setup.

The installation guide is available here.

Many third-party plugins need to be updated to their latest versions to be compatible with webpack 4. Links to popular plugins can be found here.

Add the new mode option to your configuration, setting it to 'production', 'development', or 'none' depending on your use case.

module.exports = {
  // ...
+  mode: 'production',
}
Diff

[!TIP] 'development' mode and 'production' mode serve different purposes. You can use webpack-merge, as shown in the production guide, to maintain separate optimized configurations.

The following plugins can be removed from your configuration because they are enabled by default in production mode:

module.exports = {
  // ...
  plugins: [
-    new NoEmitOnErrorsPlugin(),
-    new ModuleConcatenationPlugin(),
-    new DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") })
-    new UglifyJsPlugin()
  ],
}
Diff

These plugins are enabled by default in development mode:

module.exports = {
  // ...
  plugins: [
-    new NamedModulesPlugin()
  ],
}
Diff

These plugins were deprecated and have now been removed:

module.exports = {
  // ...
  plugins: [
-    new NoErrorsPlugin(),
-    new NewWatchingPlugin()
  ],
}
Diff

CommonsChunkPlugin has been removed. Use the optimization.splitChunks options instead.

See the optimization.splitChunks documentation for details. The default configuration may already meet your needs.

[!TIP] When generating HTML from the stats, you can set optimization.splitChunks.chunks: "all", which is the optimal configuration in most cases.

When using import() to load a non-ESM module, the result has changed in webpack 4. You now need to access the default property to get the value of module.exports.

module.exports = {
  sayHello: () => {
    console.log('hello world');
  },
};
JavaScript

When using a custom loader to transform .json files, you now need to change the module type:

module.exports = {
  // ...
  rules: [
    {
      test: /config\.json$/,
      loader: 'special-loader',
+     type: 'javascript/auto',
      options: {...}
    }
  ]
};
Diff

If you are still using json-loader, you can remove it:

module.exports = {
  // ...
  rules: [
    {
-     test: /\.json$/,
-     loader: 'json-loader'
    }
  ]
};
Diff

module.loaders was deprecated in webpack 2 and is now removed in favor of module.rules.