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…
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…
import(/* webpackPrefetch: true */ "...") for prefetching.
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
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. …
import()when importing non-ESM (i. e. CommonJS modules).
Actually there are a lot of cases to consider when using
But let’s start with few naming hints:
Source: the module containing the
Target: the module referenced by the request in the
non-ESM: a CommonJs or AMD module not setting
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
JSON: a json file
These cases need to be considered:
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.
production. These are the two values to which
mode can be set to.
development defaults will give you the best* development experience focusing on:
(* Actually this depends on your use case, we try to cover the most common one here)
production defaults will give…
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
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.
this.hot was added to the loader context. Loaders can use it to generate HMR specific code.
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…
Like always we merged a lot of bugfixes. Best read the change logs for details on these bugfixes.
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.
You can use
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.
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…
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:
Many classes now use
SortableSets) on the API level now. This change may break plugins which try to modify these arrays.
Performance. “Deleting” and “Adding once” is now
O(1) instead of
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…