Introduction to new features of WEBPACK3

June 20 Webpack launched the 3.0 version, the official also issued a notice. According to the announcement, the Webpack team focused future revisions on the functional needs of the community, while maintaining a fast and stable release rhythm. This article mainly according to the announcement content, briefly introduces the new features of Webpack3, as well as the application in the actual project.

Upgrade to Webpack3

To upgrade to WEBPACK3, you only need to install with NPM:

NPM install [email protected]--save-dev

　　

Webpack3 almost perfect compatibility with Webpack2, in addition to affect the use of some plug-ins, the official data is: 98% of users after the upgrade, did not affect the normal use of webpack functions. There may be some warning associated with the upgrade, but it is generally not affected.

NPM WARN [email protected] requires a peer of [email protected] | | 2 | | ^2.1.0-beta | | ^2.2.0-RC but none is installed.npm WARN [email protected] requires a peer of [email protected]^2.2.0 but none is instal LED.NPM WARN [email protected] requires a peer of [email protected] | | ^2 | | ^2.1.0-beta | | ^2.2.0-RC but none was installed.

　　

Webpack3 new Features (1) Scope hoisting-scope promotion

In a previous Article Webpack literacy article introduced, each module after WEBPACK2 processing is wrapped by a function, as follows:

/* *//***/(function (module, __webpack_exports__, __webpack_require__) {    window.lib = {}    ...    /* Harmony Default Export */__webpack_exports__["a"] = (window.lib);/***/}),

　　

This will bring a problem: Reduce the browser JS execution efficiency, which is mainly the closure function to reduce the JS engine parsing speed.

So the Webpack team refer to closure compiler and rollup JS, some connected modules, put into a closure function inside, by reducing the number of closure function to speed up the execution of JS.

WEBPACK3 uses this new feature by setting up Moduleconcatenationplugin:

Module.exports = {    plugins: [    new Webpack.optimize.ModuleConcatenationPlugin ()  ]};

　　

The output comparison chart is as follows:

Figure A:webpack2 Output file part of the content

Figure B:webpack3 Output file part of the content

The Scope hoisting is based on ES module, which is not applicable for Common.js and AMD modules and is still used in Webpack2 mode if not applicable.

(2) Magic Comments

A new method of code Splitting-async is introduced in Webpack2 import (), which is used to dynamically introduce ES module,webpack to a separate code block (chunk) for modules that pass in the import method. Instead of specifying Chunkname for the generated chunk, like Require.ensure, the Magic Comment is presented in Webpack3 to resolve the problem, using the following:

Import (/* Webpackchunkname: "my-chunk-name" */' module ');

　　

The future of Webpack

To understand the future of webpack, we suggest to go through the history of Webpack.

Webpack1 supports both CMD and AMD, while having rich plugin and loader,webpack are increasingly widely used.

Webpack2 the biggest improvement relative to Webpack is to support ES module, which can directly analyze the dependencies between ES module, and webpack1 must convert ES module to COMMONJS module, To use Webpack for next processing. In addition, WEBPACK2 supports tree sharking and is highly aligned with ES module's design approach.

Webpack3 the transition is relatively smooth relative to Webpack2, but the new features are mostly presented around ES module, such as scope hoisting and magic Comment;

In short, the future of Webpack must be built around ES support, build speed and performance of the output code, and the user experience, while Webpack's team has pledged to decide on new feature development priorities based on community voting. The following are the key points of concern for the future given in the announcement:

• High-Performance Build cache
• Increase initialization speed and incremental build efficiency
• Better support for type Script
• Revise long-term cache
• Support WASM Module Support
• Enhance the user experience

Introduction to new features of WEBPACK3