Summary

Webpack 3 has been officially released, offering significant improvements such as Scope Hoisting, "magic comments", and a promise of faster and more stable releases without breaking changes.

Abstract

The official release of webpack 3 marks a major milestone for the web development community, delivering on promises made after the release of webpack v2. This new version introduces Scope Hoisting as its flagship feature, which improves execution speed by concatenating module scopes into a single closure, akin to tools like Closure Compiler and RollupJS. Additionally, webpack 3 introduces "magic comments" to provide more flexibility to the dynamic import syntax, allowing for named chunks similar to require.ensure. The upgrade process is designed to be seamless, with the majority of users experiencing no breaking functionality. The webpack team has emphasized their commitment to the community by prioritizing feedback and contributions, ensuring a more collaborative and efficient development cycle.

Opinions

The webpack team values community feedback, having prioritized features voted on by users and ensuring a faster and more stable release cycle.
There is a strong emphasis on not introducing breaking changes between release candidates, aiming to build trust with the community.
The team is proud of their achievement in webpack 3, particularly the implementation of Scope Hoisting, which is seen as a significant enhancement to execution speed.
The introduction of "magic comments" is a response to user concerns, showcasing the team's dedication to addressing the community's needs and improving the overall user experience.
The webpack team encourages further community engagement by inviting users to share their migration experiences and performance data.
The team expresses gratitude to all contributors, sponsors, and users, acknowledging their essential role in webpack's success and future development.
They also promote support for the project through donations to their open collective, highlighting the importance of sustaining the core team and contributors who volunteer their time.

🍾🚀 webpack 3: Official Release!! 🚀🍾

Scope Hoisting, “magic comments”, and more!

After we released webpack v2, we made some promises to the community. We promised that we would deliver the features you voted for. Moreover, we promised to deliver them in a faster, more stable release cycle.

No more year-long betas, no breaking changes between release candidates. We promised to do you right by you, the community that makes webpack thrive.

The webpack team is proud to announce that today we have released webpack 3.0.0!!! You can download or upgrade to it today!!

npm install [email protected] --save-dev

or with

yarn add [email protected] --dev

Migrating from webpack 2 to 3, should involve no effort beyond running the upgrade commands in your terminal. We marked this as a Major change because of internal breaking changes that could affect some plugins.

So far we’ve seen 98% of users upgrade with no breaking functionality at all!!!

What’s new?

As we mentioned, we aimed to deliver the features that you voted for! Because of the overwhelming GitHub contributions, support from our backers and sponsors, we have been able to hit each one. 😍

🔬 Scope Hoisting 🔬

Scope Hoisting is the flagship feature of webpack 3. One of webpack’s trade-offs when bundling was that each module in your bundle would be wrapped in individual function closures. These wrapper functions made it slower for your JavaScript to execute in the browser. In comparison, tools like Closure Compiler and RollupJS ‘hoist’ or concatenate the scope of all your modules into one closure and allow for your code to have a faster execution time in the browser.

As of today, with webpack 3, you can now add the following plugin to your configuration to enable scope hoisting:

module.exports = {  
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

Scope Hoisting is specifically a feature made possible by ECMAScript Module syntax. Because of this webpack may fallback to normal bundling based on what kind of modules you are using, and other conditions.

To stay informed on what triggers these fallbacks, we’ve added a --display-optimization-bailout cli flag that will tell you what caused the fallback.

Because scope hoisting will remove function wrappers around your modules, you may see some small size improvements. However, the significant improvement will be how fast the JavaScript loads in the browser. If you have awesome before and after comparisons, feel free to respond with some data as we’d be honored to share it!

🔮 ”Magic Comments” 🔮

When we introduced in webpack 2 the ability to use the dynamic import syntax ( import() ), users expressed their concerns that they could not create named chunks like they were able to with require.ensure.

We have now introduced what the community has coined “magic comments”, the ability to pass chunk name, and more as an inline comment to your import() statements.

Although these are technically features we released in v2.4 and v2.6, we worked to stabilize and fix bugs for these features that have landed in v3. This now allows the dynamic import syntax to have the same flexibility as require.ensure.

To learn more information, see our newest documentation guide on code-splitting that highlights these features!!!

😍 What’s next? 😍

We have quite a few features and enhancements that we are hoping to bring you!!! But to take control of the ones we should be working one, stop by our vote page, and upvote the features you would like to see!

Here are some of those things we are hoping to bring you still:

Better Build Caching
Faster initial and incremental builds
Better TypeScript experience
Revamped Long term caching
WASM Module Support
Improve User Experience

🙇Thank you 🙇

All of our users, contributors, documentation writers, bloggers, sponsors, backers, and maintainers are all shareholders in helping us ensure webpack is successful for years to come.

For this, we thank you all. It is not possible without you and we can’t wait to share what is in store for the future!!

No time to help contribute? Want to give back in other ways? Become a Backer or Sponsor to webpack by donating to our open collective. Open Collective not only helps support the Core Team, but also supports contributors who have spent significant time improving our organization on their free time! ❤