Update to webpack v5

[ludofischer]

Since more projects like Next.js are moving to webpack 5 by default, I've had another go at #205. Moving to webpack 5 also helps with #232 since webpack 5 itself has fewer dependencies.

I've used the previous PR #206 as a basis.
I've struggled with updating the expected bundle sizes in tests as I could not understand exactly how the constants inn

size-limit/packages/webpack/index.js

Line 12 in 86fe466

const WEBPACK_EMPTY_PROJECT = 962

were computed.
With webpack 5, the outputs seem to be sometimes larger and sometimes smaller.

Also I am not sure how to check that the bundle analyzer works correctly.
The previous blocker was webpack-bundle-analyzer not working with webpack 5 but it seems the most problematic issue has been solved in the mean time webpack-contrib/webpack-bundle-analyzer#447

Fixes #205

[ludofischer]

More info on issues with webpack-bundle-analyzer: webpack-contrib/webpack-bundle-analyzer#466 Apparently since webpack now aggressively concatenates modules by default, sometimes it is just impossible to show how much each module contributes to the output size, since the module boundaries are lost in the output.

[ai]

I've struggled with updating the expected bundle sizes in tests as I could not understand exactly how the constants inn

You need to fix these constants according to the new webpack loader in the bundle (code which webpack adds in additional to user’s code).

We are using them to subtract webpack’s own code from the bundle to calculate the cost of added library:

libraryCost = projectWithLib - emptyProject

Change the value to have 0 in empty project test https://github.com/ai/size-limit/blob/main/packages/size-limit/test/run.test.js#L300-L306

And change IMPORT constants to have 1 on importing the single digit https://github.com/ai/size-limit/blob/main/packages/webpack/test/index.test.js#L240-L258

With webpack 5, the outputs seem to be sometimes larger and sometimes smaller.

It is OK. We are using gzip for many cases and some little juggling in size is expected (it is compromise between different ways to find the “cost”).

Also I am not sure how to check that the bundle analyzer works correctly.

If --why is showing Webpack Bundle Analyzer data it is OK. It is now Webpack Bundle Analyzer duty to find the best way to use webpack 5 API.

Anyway Webpack Bundle Analyzer data was never 100% accurate, it just help understand what happens, not find the exact numbers.

[ludofischer]

OK I think I have updated the constants in packages/webpack/index.js to have the correct values, so the empty project has 0 bytes and the single import has 1B. There are still some discrepancies with the old numbers in other tests, I think that because webpack does not include any runtime at all for basic examples, the gzip size ends up larger than the non-gzip size.

[ludofischer]

I have touched this file once and the git hook keeps wanting to reformat it although there are no changes.

[ai]

Looks great. Give me a few days, I need to release one fix in patch release of Size Limit, and then I will start preparing major release.

[ai]

I will release it after this PR will be merged #217

[ai]

Thanks for waiting. Released in 6.0.