The final release of webpack 2, the popular JavaScript module and asset bundler, has arrived, bringing with it native support for ES2015 and vastly improved documentation. However, it's too early to tell if the new version will dramatically improve build times and file sizes.
Webpack 2 (officially version 2.2) includes a number of changes intended to make using it much easier. One of the most welcome upgrades is the new documentation. For example, the version 2 docs include an entire section dedicated to explaining the core concepts such as loaders, plugins, and configuration in more detail than the 1.x documentation did. This should reduce the time it takes a newcomer to get up to speed and the team is taking documentation very seriously.
Webpack documentation coordinator, Juho Vepsäläinen, said that new documentation was essential to the success of version 2:
The [1.0] documentation is great if you already understand webpack. But if you are just starting to delve into the tool, it’s a less-than-desirable experience. In order to make webpack both more approachable and usable, we decided to redevelop the documentation.
For developers using version 1.x who want to switch to 2.x, a migration guide is available. In the new version, some of the configuration terms were changed to make them easier to understand. One such change is that the top level module.loaders section has been changed to module.rules. Version 1.x could be confusing because the configuration had loaders within loaders. The new version makes it more clear that a loader is something used as part of a rule.
The old way of chaining loaders was ugly and cumbersome:
loader: "style-loader!css-loader!less-loader"
The new way splits these out into an array, making them much easier to read:
use: [
"style-loader",
"css-loader",
"less-loader"
]
Because webpack 2 supports ES2015 modules out of the box, it supports tree shaking by default. Tree shaking removes unused code from the target bundle, reducing its size. Unfortunately, because browsers don't yet support ES2015 modules by default, much of the current JavaScript ecosystem ships code compiled to CommonJS, negating the impact. Swizec Teller says the current improvement is minimal:
However, we have to wait for the ecosystem to catch up. Most libraries are distributed with ES6 modules compiled to ES6, so in a real world scenario, you only get about 4% improvement. With Webpack 2 around the corner, this is sure to improve.
It's also not clear that version 2 is dramatically faster. Brett Uglow wrote about his experience with webpack 2's speed but came away disappointed in the results. Webpack core team member Sean Larkin says that near the end of development, they changed the way webpack builds which "yielded some pretty noteworthy gains in performance".
Going forward, the team has invited the community to use their feature voting system in order to help guide and prioritize future development. Version 2.2 will soon become the default version installed when issuing a npm install webpack command.
