Webpack5 is officially released. What are the new features

As the most widely used front-end packaging tool, webpack has become a part of the front-end engineering infrastructure. It has been 18 years since a major version of Webpack was updated. After two years, let's see what new features Webpack5 has brought and what help it has for our application.

Overview

The following picture is a screenshot from the official Changelog of Webpack. We can see that there are mainly improvements in these aspects:

Improve performance by persisting cache Adopt better persistence caching algorithm and default behavior Reduce the volume of Bundle by optimizing Tree Shaking and code generation Improve the compatibility of Web platform Clear the unreasonable state caused by no incompatibility changes before in order to implement Webpack4 Try introducing major changes now to prepare for future functionality so that we can use Webpack 5 for as long as possible

I have to say that this official statement is a little brief, only mentioning the optimized performance of persistent cache and better Tree Shaking, but the important feature of Module federation is not mentioned. Let's follow this site to see what parts have been upgraded.

Obsolete feature removal

The first is to remove the function of Warming in Webpack4.

At the same time, IgnorePlugin and BannerPlugin must now pass in 1 parameter, which can be Object, String or Function

require.include Syntax is discarded, and Warming will be used. Of course, this behavior can be passed Rule.parser.requireInclude To change this syntax to allowed, deprecated or disabled

Remove automatic Node. js Polyfills. The main purpose of the early Webpack was to make the modules of Node. js run in browsers. However, with the change of module pattern, more and more modules are only used in browsers. At this time, automatic Polyfills 1 Node modules (such as crypto) will undoubtedly increase the packaging volume, and this automatic behavior is removed after Webpack5

Long term caching

Deterministic module, module ID, and export name.

First of all, the module, ID and export name are only determined by 1, and the corresponding configuration behind it is chunkIds: "deterministic", moduleIds: "deterministic", mangleExports: "deterministic" Module and module ID use 3-4 digit number ID, and the derived name uses 2 digit number ID This setting is turned on by default, but it is also allowed to be modified through the above configuration

True content hash

In Webpack5, the true hash of the file contents [contenthash] is used instead of the previous hash that only used the internal structure of the file This has a positive effect on long-term caching, especially when there are only comments and variable name changes in the code, and Webpack will continue to use the previous cache instead of the new file contents

Development support

The first is Chunk IDs semantics.

The new Chunk IDs uses a new syntax to generate Chunk ID, and one Chunk ID is determined by the content of chunk. So we no longer need import(/* webpackChunkName: "name" */ "module") Come to debugging

However, it is also possible to expose sensitive content in chunk (if any), and this behavior can be modified by modifying chunkIds: "named"

Followed by Module Federation

This is a feature worthy of emphasis. Module federation allows multiple Webpack builds to work in one piece, aggregating multiple builds into one piece at run time, which looks like a large build piece. For example, the following examples app_one and app_two use the shared ["react", "react-dom","react-router-dom"]， At the same time, app_two exposed its own Dialog to app_one for use Module federation can solve the problem of direct interdependence of modules natively, which is especially suitable in the field of micro-front-end! At the same time, some basic dependencies may be changed into external dependencies, which need not be introduced when developing locally. By avoiding the well-known problem that node_modules is too deep, it is possible to achieve significant efficiency improvement in the local development process

module.exports = {
 plugins: [
  new ModuleFederationPlugin({
   name: "app_two_remote",
   library: { type: "var", name: "app_two_remote" },
   filename: "remoteEntry.js",
   exposes: {
     " ./Dialog " : "./src/Dialog"
   },
   remotes: {
    app_one: "app_one_remote",
   },
   shared: ["react", "react-dom","react-router-dom"]
  }),
  new HtmlWebpackPlugin({
   template: "./public/index.html",
   chunks: ["main"]
  })
 ]
};

Better Tree Shaking.

Nested tree-shaking. Webpack will now track the links of export, which is better optimized for nested scenarios. For example, b will not appear in production code in the following example.

// inner.js
export const a = 1;
export const b = 2;

// module.js
import * as inner from "./inner";
export { inner }

// user.js
import * as module from "./module";
console.log(module.inner.a);

Internal module. Webpack 4 does not analyze the dependencies between import and export modules, but Webpack 5 records the dependencies through optimization. innerGraph. For example, in the following example, only the test method uses someting. Eventually, you can mark more unused export items

import { something } from "./something";

function usingSomething() {
return something;
}

export function test() {
return usingSomething();
}

Commondjs. Now Webpack not only supports ES, module, tree, Shaking, but the modules of commonjs specification begin to support

Other characteristics

New Web platform support. Start native support for JSON Modules, Asset Modules, Native Worker and asynchronous modules in Webpack 5 The code generated by Webpack is not only ES5, but also ES6 Node. The minimum supported version of js has been upgraded from 6 to 10

Students who like early adopters can upgrade their Webpack according to the migration guide now. For careful consideration, it is recommended to give priority to upgrading from their own hands and background applications
Migration Guide: https://github. com/webpack/changelog-v5/blob/master/MIGRATION% 20GUIDE. md

Summary

As you can see, Webpack5 has undergone a lot of upgrades in the past two years, including better performance, stronger development capability support and more native features. The impact of Webpack5 is not limited to this. The change of module dependency and the impact of Module Federation on the existing development model are still under further observation. Expect Web development to get better and better.