Our documentation site is using Webpack 5 already

A couple of days ago, Webpack 5 was released. Webpack is such a great tool that we decided to upgrade it on our documentation site with the hope of finding and fixing some bugs to give back to its incredible community.
We did not find any bugs, but upgrading Webpack is (and always was) a great pleasure. Excellent documentation, migration guide, changelog, support on GitHub.

Issues

We encountered only two issues during the migration:

1. Production build time is slower. About two times slower. That is not a big deal, as it will probably improve with time, and incremental builds are much faster because of the persistent cache — no big deal.
2. Docsearch (search script provided by Algolia) was not working because of the missing process object. The is described in Webpack 5 migration (but you need to read it to know that), so a couple of lines of polyfill fixed that.

  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV),
    },
  })

Credits: https://github.com/algolia/docsearch/issues/980#issuecomment-708388893

Deprecations, warnings

Webpack warnings and errors communicated everything else, so all the config updates were pretty easy and pointed us in the right direction when it came to cleaning it up a bit. We found two loaders and one configuration option that were not used.

Build summary

I hope that the build summary will visually improve because it was much easier to scan it in version 4.

Before:

After:

Update: Colors are back as of 5.1.3 :)

---

Hopefully, your migration will go as smoothly as ours, and your builds will be smaller. :)

Read more

If you are interested in more performance oriented content, follow me and I promise to deliver original, or at least effective methods of improving your website.

Using WebP in Your Existing Webpage

Paweł Kowalski for platformOS ・ Nov 17 '20

#webperf #design

Optimizing Images For The Web

Paweł Kowalski for platformOS ・ Apr 24 '20

#beginners #node

3 Tips on Preserving Website Speed

Paweł Kowalski for platformOS ・ Jun 24 '20

#webperf #webpack #javascript #css