Journal for Developers

Webpack 3.0 – What’s New?

0 271

Webpack 3.0 was released in the month of June and with that release, they have provided few features that were voted for.

But first thing first, we need to install Webpack before using these new features.

npm install webpack

or with

yarn add webpack

 

#What’s New?

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.

To enable scope hoisting all you have to do is add the following plugin to your configuration:

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.

To be informed on what’s triggering these fallbacks, the team has added a --display-optimization-bailout cli (command-line interface) flag that will tell what has caused the fallback.

You may see some small size improvements, as scope hoisting will remove function wrapper around the modules. However, the significant improvement will be how fast the Javascript loads in the browser.

Magic Comments

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

But with the introduction of webpack 3, the team has introduced “magic comments”, it’s basically the ability to pass chunk names as an inline comment to your import() statements.

import(/* webpackChunkName: "my-chunk-name" */ 'module');

Although these were technical features which were released in v2.4 and v2.6, the team has worked to stabilize and fix bugs for these features and these features were then have landed in v3. This now allows the dynamic import syntax to have the same flexibility as require.ensure.

Subscribe to our Journal

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!