webpack 4.0 to 4.16: Did you know?
We add a lot of features in minor versions.
It’s easy to miss if you don’t follow the changelog closely. So here is a little overview over the most notable features added:
You can specify the
filename with a equally-name option. This makes only sense for initial chunks, but feel free to name these chunks in any way you want to.
By default webpack uses
~ to join chunk names when choosing an automatic name. This can now be changed with
automaticNameDelimiter. Some servers doesn’t seem to like
chunks option used to support only
"all". Now you can pass a custom function to select chunks in any way you like.
The new experimental
maxSize option is probably to most notable option. It will additionally split chunks to form smaller chunk between
maxSize (pre-minimized size). This makes sense to better leverage Long Term Caching with HTTP/2.
Support for prefetching (and preloading) was added for
import(). These magic comments are an easy way to prefetch on demand loaded code:
import(/* webpackPrefetch: true */ "..."). The best thing: it’s super easy to use.
Experimental support for
[contenthash] was added. This narrows the scope of the hash when using CSS via the mini-css-extract-plugin.
A common mistake when using the webpack node.js API was to call
watch. This now throws an error, while causing weird race-conditions before.
We now print the loader name in error messages for loaders. This should make it easier to locate the problem.
resolve.alias option now allows to alias absolute paths. This can be used replace a specific module similar to the
NormalModuleReplacementPlugin. To good thing about
resolve.alias: The file itself doesn’t have to exist.
There are a bunch of weird options
optimization.occurrenceOrder. Actually they all affect how module and chunk ids are assigned and can’t be used together correctly. We now merged all these options into
optimization.chunkIds with enum values. The old options will be removed in the next major version. We plan to add another way to assign module/chunk ids for long term caching, but this is not ready to be told yet.
We completely refactored our (still experimental) WebAssembly pipeline.
It now leverages Streaming Compilation and provide better runtime performance.
It will now handle dependencies from wasm to wasm correctly when
i64-types, tables or memories are involved.
There are new errors i. e. about importing
i64-type into JS or using wasm in the initial page load.
It now also possible to use wasm in electron when compiling with webpack.
Our namespace objects now print
[object Module] when calling
toString() instead of
[object Object]. Major improvement!
We now support ES2019 features.
We did additional performance and memory improvements.
import(/* webpackIgnore: true */ "http...") it’s now possible to use the native browser
import() when targeting a supporting browser.
DllPlugin got a
entryOnly option to only include modules in the entrypoint in the manifest. This allows to scope-hoist and tree-shake the remaining modules.
DefinePlugin got a
DefinePlugin.runtimeValue(). This allows to add computed values which are not constant.
For loaders we added the ability to use the
module.rules configuration when generating dependencies.
And of course we fixed a lot of bugs…
A lot of stuff. Did you learn something new? I hope so.
Oh you are still on webpack 3. I’m sorry, what is blocking you? We already working on webpack 5, so your stack might be outdated soon…
webpack is not backed by a single big company, unlike many other big Open Source products. The development is funded by donations and sponsorships. Please consider sponsoring if you depend on webpack… (Ask your boss!)
Special thanks to these sponsors: (Top 5)