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…
The contributions in the webpack organizations increased a lot in the last time. This comes with new challenges.
We are currently paying every contributor an estimated $50/hour for contributing to any webpack project (when contributed at least 6 hours per month). This means with increasing contributions the cost will increase.
Sadly the sponsorships don’t increase in the same way. You may notice the problem from the graph, we are spending more money then we earn. This lead to the fact that we are not longer able to pay all contributors the full amount and were forced to pay out less (80%).
That’s a bit sad, but to solve this we either need to increase the income or decrease…
webpack 4.6.0 adds support for prefetching (and preloading).
TL;DR: Use import(/* webpackPrefetch: true */ "...") for prefetching.
What‘s <link rel=”prefetch”>?
This “Resource Hint” tells the browser that this is a resource that is probably needed for some navigation in the future.
Browsers usually fetch this resource when they are in idle state. After fetched the resource sits ready in the HTTP cache to fulfill future requests. Multiple prefetch hints queue up and are fetched while idling. When leaving idle state while prefetching to browser may cancel any ongoing fetch (and put the partial response into cache, to be continued with Content-Range headers) and stop processing the prefetch queue.
To sum it…
webpack 4 made some major improvements to the chunk graph and added a new optimization for chunk splitting (which is a kind of improvement over the CommonsChunkPlugin).
Let’s take a look at some of the drawbacks of the old chunk graph.
In the old graph chunks were connected to other chunks via parent-child-relationship and chunks contain modules.
When a chunk has parents it can be assumed that at least one parent is already loaded when the chunk is loaded. This information can be used by optimization steps. I. e. …
One of the breaking changes in webpack 4 is the behavior of import() when importing non-ESM (i. e. CommonJS modules).
Actually there are a lot of cases to consider when using import().
But let’s start with few naming hints:
Source: the module containing the import() expression
Target: the module referenced by the request in the import() expression
non-ESM: a CommonJs or AMD module not setting __esModule: true
transpiled-ESM: a CommonJS module setting __esModule: true because it was transpiled from ESM
ESM: a normal EcmaScript module
strict-ESM: a more strict EcmaScript module i. e. from a .mjs file
JSON: a json file
These cases need to be considered:
- (A) Source: non-ESM, transpiled-ESM or ESM
- (B) Source: strict-ESM (mjs)
- (1) Target: non-ESM
- …
webpack adds a mode option. What does that mean?
So webpack 4 added a mode option. And it’s required. (Actually it’s not required but it will warn you if you omit it.)
webpack 4 now ships with two sets of defaults. development and production. These are the two values to which mode can be set to.
The development defaults will give you the best* development experience focusing on:
- Tooling for in browser debugging
- Fast incremental compilation for a fast development cycle
- Useful error messages at runtime
(* Actually this depends on your use case, we try to cover the most common one here)
While the production defaults will give…
This guide targets plugin and loader authors
For loaders:
this.options and this.rootContext
webpack 3 already deprecated this.options in the loader context. webpack 4 removes it now.
A lot of people are missing the this.options.context value now. It has been added as this.rootContext.
Guideline: Loaders should receive all options via this.query. They should not use other ways to receive options, i. e. no property in webpack options, no environment variable.
HMR code
this.hot was added to the loader context. Loaders can use it to generate HMR specific code.
AST passing
It’s now also possible to pass AST directly from loader to webpack to avoid double parsing.
webpack will happily accept any AST you pass. If it doesn’t…
2017/09/25–2017/10/22
What happend in webpack 3?
We released a few new webpack 3 versions 3.7.0, 3.7.1, 3.8.0, 3.8.1.
Like always we merged a lot of bugfixes. Best read the change logs for details on these bugfixes.
Stats validation
The validation of the stats option was broken in version < 3.8.1. Now stats are validated correctly and webpack may scream at you when typos are hidden here.
On demand loading of initial chunk
You can use import() or require.ensure to load a chunk with specified chunk name. If you try to specify a name that is already used as entry point of commons chunk, webpack versions < 3.7.0 allowed that but behave weirdly. …
The Fellowship is a three month long program supporting three to five open-source developers with $8k per month to focus full-time on their project, no other strings attached.
Details: https://segment.com/blog/segment-open-fellowship-2017/
Why did I apply?
About 6 months ago the webpack collective had only a few Sponsors, but we were using very little of the money. So a bunch of money was accumulated. I decided to use to money by working full-time on webpack. I wanted to work as long as possible for Open Source, but at this time it looked like I’m only able to work about 3 months until running out-of-money. I had…
2017/09/11–2017/09/24
In the last weeks I finished and merged all queued PRs with breaking changes and features for webpack 4. Here is a summary of the important ones, so you are not surprised when you read it in the changelog:
Sets
Many classes now use Sets (or SortableSets) on the API level now. This change may break plugins which try to modify these arrays.
Reason
Performance. “Deleting” and “Adding once” is now O(1) instead of O(n).
StackedSetMap
The Parser also uses Arrays/Objects to track renaming and variable definitions. The additional challenge here was the inheriting in AST scopes. Previously we just added definitions to…
