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:
Web Performance
The optimization.splitChunks feature was added in webpack 4. It got a few new options:
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 ~.
The chunks option used to support only "initial" "async" and "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 minSize and 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.
Usablity
A common mistake when using the webpack node.js API was to call run and 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.
The 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.namedModules optimization.hashedModuleIds optimization.namedChunks and 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.moduleIds and 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.
WebAssembly
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.
Spec-compliance
Our namespace objects now print [object Module] when calling toString() instead of [object Object]. Major improvement!
We now support ES2019 features.
Other features
We did additional performance and memory improvements.
With import(/* webpackIgnore: true */ "http...") it’s now possible to use the native browser import() when targeting a supporting browser.
The 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.
The 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)
