Shulou(Shulou.com)06/01 Report--

Upgrade to webpack3

To upgrade to webpack3, you only need to install through npm:

1npm install webpack@3.0.0-save-dev

Webpack3 is almost perfectly compatible with webpack2, except that it will affect the use of some plug-ins, the official figure is: 98% of users upgraded, did not affect the normal use of webpack features. There may be some related warning when upgrading, but it generally does not affect the use.

123npm WARN babel-loader@6.4.1 requires a peer of webpack@1 | | 2 | | ^ 2.1.0-beta | | ^ 2.2.0-rc but none was installed.npm WARN extract-text-webpack-plugin@2.1.0 requires a peer of webpack@ ^ 2.2.0 but none was installed.npm WARN html-webpack-plugin@2.28.0 requires a peer of webpack@1 | | ^ 2 | | ^ 2.1.0-beta | | ^ 2.2.0-rc but none was installed.

New features of webpack3 (1) Scope Hoisting- scope enhancement

As described in a previous article, webpack Literacy, each module processed by webpack2 is wrapped in a function, as follows:

1234567 function * 50 * / / * / (function (module, _ _ webpack_exports__, _ _ webpack_require__) {window.lib = {}. / * harmony default export * / _ _ webpack_exports__ ["a"] = (window.lib); / * * /})

This will lead to a problem: reduce the efficiency of JS execution in the browser, which is mainly because the closure function slows down the parsing speed of the JS engine.

So the webpack team referred to Closure Compiler and Rollup JS and put some related modules into a closure function to speed up the execution of JS by reducing the number of closure functions.

Webpack3 uses this new feature by setting up ModuleConcatenationPlugin:

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

The output comparison chart is as follows:

Part of the output file under figure a:webpack2

Part of the output file under figure b:webpack3

Scope Hoisting is based on ES Module, which is not suitable for Common.js and AMD modules, and webpack2 mode is still used when it is not applicable.

(2) Magic Comments

A new method import () of Code Splitting-Async is introduced in webpack2, which is used to dynamically introduce ES Module,webpack to package the modules passed into the import method into a separate code block (chunk), but it cannot specify chunkName for the generated chunk like require.ensure, so Magic Comment is proposed in webpack3 to solve this problem. The usage is as follows:

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

The Future of webpack

To understand the future of webpack, it is recommended to take a look at the history of webpack.

Webpack1 supports CMD and AMD. At the same time, it has rich plugin and loader,webpack and is gradually widely used.

The biggest improvement of webpack2 over webpack is that it supports ES Module, which can directly analyze the dependencies between ES Module, while webpack1 must convert ES Module into CommonJS module before it can use webpack for further processing. In addition, webpack2 supports tree sharking, which is highly consistent with the design idea of ES Module.

Compared with webpack2, webpack3 has a relatively smooth transition, but most of the new features are proposed 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 the performance and user experience of the generated code, and webpack's team has promised to determine new feature development priorities based on community votes. The following are the future priorities given in the announcement:

High-performance build cache

Improve initialization speed and incremental build efficiency

Better support for Type Script

Revise long-term cach

Support for WASM module support

Enhance user experienc

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.