This article briefly shares the new features in the latest release of Webpack 3 for your reference.

1. New features of Webpack 3

On June 20, Webpack released the latest version 3.0 and announced it on Medium.

Webpack is now almost the standard for front-end development, so let’s take a look at the major feature updates in the new version.
There is not much change overall compared to 2.0, so don’t panic.
For related video tutorials on Webpack 2.0, you can refer to the 20 episodes of video tutorials I recorded, Webpack 2 Video Tutorials.
The following is the Features List in v3.0 Release.

• node_modules no longer mangle to ~ in stats [breaking change]

• timeout for HMR requests is configurable

• added experimental Scope Hoisting (webpack.optimize.ModuleConcatenationPlugin)

• some performance improvements

• added output.libraryExport to select an export for the library

• sourceMapFilename now supports [contenthash] [breaking change]

• module.noParse supports functions

• add node: false option to disable all node specific additions

1.1 Update method and version migration

You can install it directly through the command, you need to add it later version number.

npm install webpack@3.0.0 --save-dev

or

yarn add webpack@3.0.0 --dev

As for upgrading from Webpack 2 to Webpack 3, the official words are:

no effort beyond running the upgrade commands in your terminal

So it can be concluded that although the version number has changed significantly, there will not be much change, so you can breathe a sigh of relief.

1.2 Scope Hoisting

Each module before was included in an independent function closure. This processing method caused the problem of slow code execution in the browser.
After referring to frameworks such as Closure Compiler and RollupJS, the development team changed the wrapping method of function closures into a configurable form.
Just configure it in the previous plugins.

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

Of course, the configuration may not be successful due to the loading of some modules. The official CLI parameter --display-optimization-bailout is used to debug what caused the configuration failure.

1.3 Magic Comments

In fact, you can command chunk name.

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

For more usage, please refer here.

2. Next new features

• Better compilation cache

• Fast first and incremental compilation Speed

• More friendly support for TypeScript

• Modify Long term caching

• Add support for WASM Module support

• User experience improvement

3. Summary

Overall, there is not much change, and asMagic Comments and other functions have been released in the 2.4 version. Personally, I feel that releasing a 3.0 version is mainly a symbol of the team's determination to provide better products.

The above is the detailed content of What are the new features of Webpack3?. For more information, please follow other related articles on the PHP Chinese website!