A comprehensive set of turnkey infrastructure integrations

Including dozens of AWS and Azure services, web, database, network, containers, orchestrations like Docker and Kubernetes, and more.

START FREE TRIAL

Complete visibility into the health and performance of applications and their underlying infrastructure

Quickly pinpoint the root cause of performance issues across the stack, down to a poor-performing line of code

START FREE TRIAL

Custom metrics and analytics

Analyze custom infrastructure, application, and business metrics

View Custom Metrics Monitoring Info

Powerful API that makes it easy to collect and create any custom metric

Achieve ultimate visibility and enhanced troubleshooting with synthetic and real user monitoring

START FREE TRIAL

Free APM Software

Catch bugs early on, and gain full visibility and insights into the applications you’re developing

View Product Info

Free, full-function APM tool for testing and troubleshooting application performance before moving into production

Dev Edition includes five traces per minute, 100 metrics, three hosts, and six containers

GET FREE TOOL

Log Management and Analytics powered by SolarWinds Loggly

Integrated, cost-effective, hosted, and scalable full-stack, multi-source log management

View Log Management and Analytics Info

Collect, search, and analyze log data in addition to your metrics and traces to quickly pinpoint application performance problems

Reduce mean time to resolution (MTTR) by quickly jumping from a trace or host view into the relevant logs to accelerate troubleshooting

START FRE TRAIL

Digital Experience Monitoring Powered by SolarWinds Pingdom

Make your websites faster and more reliable with easy-to-use web performance and digital experience monitoring

View Digital Experience Monitoring Info

Add client-side web application performance monitoring. Provide maximum observability by adding the user’s perspective.

Achieve ultimate visibility and enhanced troubleshooting with synthetic and real user monitoring

START FREE TRIAL

We are big fans of webpack at AppOptics. It is a very capable tool with lots of flexibility. After hearing lots of stories about the large performance improvements of webpack 4 beta, when the final release came out, we were eager to migrate our project from v3.

The webpack configuration can be difficult to understand, and unfortunately, the webpack team was trying to hit a deadline and was unable to write any migration documentation before the v4 release. Lucky for you, we decided to push through anyway, and we took notes.

For more info about the release, check out

Upgrade node to 8.9.4

To get the best performance out of v4, @wSokra says use at least node 8.9.4.

Upgrade webpack

The webpack solution’s core functionality and CLI code have been split into two repos now.

$ npm i -D webpack webpack-cli

Use a mode

You may see an error like The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

In v4, you have to set a mode in your config.

{
  mode: "production",
}

It can also be set when invoked from CLI.

$ webpack --mode production

Change CommonsChunkPlugin to splitChunks

You may see an error like Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk) consisting of common modules shared between multiple entry points.

This functionality has moved from the CommonsChunkPlugin to the optimization.splitChunks setting.

Previously in v3, we used runtime and vendor chunks like so.

{
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ["runtime"],
      minChunks: Infinity,
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: ({ resource }) => /node_modules/.test(resource),
    }),
  ]
}

In v4, this roughly translates to…

{
  optimization: {
    runtimeChunk: "single", // enable "runtime" chunk
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "all"
        }
      }
    }
  }
}

More information about the new optimization.splitChunks option can be found here.

Get rid of ModuleConcatenationPlugin

Also known as “scope hoisting,” the ModuleConcatenationPlugin is now on by default in production mode.

Change UglifyJsPlugin

You may see an error like Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

V4 now handles dead code elimination internally. Both it and minimization are on by default in production mode, but to continue tuning Uglify settings, add the uglifyjs-webpack-plugin.

$ npm i -D uglifyjs-webpack-plugin

And in the optimization.minimizer section.

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

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

Upgrade loaders

You may see an error like Module build failed: TypeError: Cannot read property 'eslint' of undefined

This happened for us with eslint-loader and file-loader. Just upgrade the loaders.

$ npm i -D eslint-loader file-loader

The SolarWinds trademarks, service marks, and logos are the exclusive property of SolarWinds Worldwide, LLC or its affiliates.  All other trademarks are the property of their respective owners.

Related articles

© 2021 SolarWinds Worldwide, LLC. All rights reserved.