Webpack5正式发布,有哪些新特性_JavaScript

webpack作为最使用最广泛的前端打包工具，已经成为前端工程化基础设施的一部分。而Webpack上一个大版本更新已经是18年的时候了，两年时间过去了让我们看看Webpack5都带来了哪些新特性，对我们的应用又有哪些帮助。

概览

下面这张图是 Webpack 官方 Changelog 里面截图出来的，可以看到主要有这些方面的提高：

通过持久化缓存提高性能
采用更好的持久化缓存算法和默认行为
通过优化 Tree Shaking 和代码生成来减小Bundle体积
提高 Web 平台的兼容性
清除之前为了实现 Webpack4 没有不兼容性变更导致的不合理 state
尝试现在引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 Webpack 5

不得不说，这个官方声明稍微简略了一点，只提到了持久化缓存优化性能和更好的 Tree Shaking，Module federation 这个重大特性居然提都没有提。下面还是跟着小编看看具体都升级了哪些部分。

过时功能移除

首先是去掉了在 Webpack4 里面已经 Warming 的功能。

同时 IgnorePlugin 和 BannerPlugin 现在必须传入一个参数，参数可以是 Object、String或者Function

require.include 语法被废弃，使用时会有 Warming。当然这个行为可以通过 Rule.parser.requireInclude 来把这个语法改成 allowed, deprecated 或者 disabled

去掉自动 Node.js Polyfills 。早期 Webpack 的主要目的是让 Node.js 的模块能够在浏览器运行，但随着模块格局的改变，越来越多的模块只用于浏览器，这个时候再自动 Polyfills 一些 Node 模块（例如 crypto）无疑会增加打包体积，在 Webpack5 之后去掉了这个自动行为

长期缓存

确定性的模块、模块ID和导出名称。

首先是模块、ID和导出名称都唯一确定下来，背后对应的配置是 chunkIds: "deterministic", moduleIds: "deterministic", mangleExports: "deterministic"
其中模块和模块ID用 3 ~ 4 位的数字ID，导出名称用 2 位的数字ID
这个设置是默认开启的，但也允许通过上述配置修改

真实内容哈希

在 Webpack5 里会使用文件内容的真实哈希 [contenthash]，而不是之前的仅仅使用文件内部结构的哈希
这对于长期缓存有着积极的影响，尤其是代码里面只有注释和变量名修改的时候，Webpack会继续用之前的缓存而不是新的文件内容

开发支持

首先是 Chunk IDs 语义化。

新的 Chunk IDs 使用了新的语法生成 Chunk ID，一个 Chunk ID 是有 chunk 的内容来决定的。所以我们不再需要 import(/* webpackChunkName: "name" */ "module") 来 debugging 了

但这样也有可能把 chunk 里面的敏感内容暴露出去（如果有的话），可以通过修改 chunkIds: "named"来修改这一行为

其次是 Module Federation

这是一个值得浓墨重彩的特性。模块联邦允许多个 Webpack 构建产物一起工作，在运行时把多个构建产物聚合到一起，看起来就像是一个大的构建产物一样。
比如下面这个例子 app_one 和 app_two 使用了共享的 ["react", "react-dom","react-router-dom"]，同时 app_two 把自己的 Dialog 暴露给了 app_one 使用
通过模块联邦可以原生解决模块直接互相依赖的问题，在微前端领域尤其适用！同时一些基础依赖也有可能都改成外部依赖，在本地开发的时候就无需引入，通过避免众所周知的 node_modules 层次太深的问题，在本地开发过程中有可能实现大幅提效

				?

									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"]

									  })

									 ]

									};

更好的 Tree Shaking。

嵌套 tree-shaking。 Webpack现在会去追踪 export 的链路，对于嵌套场景有更好的优化，比如下面这个例子里 b 是不会出现在生产代码里。

				?

									// 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);

内部模块。Webpack 4 不会去分析导入和导出模块之间的依赖关系，Webpack5 里面会通过 optimization.innerGraph记录依赖关系。比如下面这个例子，只有 test 方法使用了 someting 。最终可以实现标记更多没有使用的导出项

				?

									import { something } from "./something";

									function usingSomething() {

									return something;

									}

									export function test() {

									return usingSomething();

									}