webpack拓展篇（六十七）：webpack5 新特性解析

说明

玩转 webpack 学习笔记

webpack5 正式发布

webpack5 在 2020-10-10 正式发布

官网：https://webpack.js.org/blog/2020-10-10-webpack-5-release/

webpack5 新特性

• 功能清除
  

       不再为 Node.js 模块自动引用 Polyfills

       require.include 语法已经被废弃

       移除 v4 版本的废气能力的代码

   长期缓存

       新增长期缓存算法，确定的 Chunk、模块 ID 和导出名称，在生产模式下默认启用。

       真正的内容 Hash

   开发支持

       命名代码块 ID：在开发模式下默认启用的新命名块 id 算法为块（和文件名）提供人类可读的名称。

       模块联邦：模块可以从指定的远程构建中导入，并以最小的限制使用。

   支持崭新的 web 平台特性

       JSON 模块

           在使用非默认导出时发出警告

           使用默认导出，未使用的属性也会被 optimization.usedExports 优化丢弃，属性会被 optimization.mangleExports 优化打乱

       资源模块

           支持浏览器原生提供的写法：new URL("./image.png", import.meta.url)(新方式)

           import url from "./image.png")(老方法)

       原生 Worker 支持

           支持 new Worker(new URL("./image.png", import.meta.url)) 浏览器默认支持的语法

       URIs

           支持 data

           支持 file

           支持 http(s) ：需要通过 new webpack.experiments.schemesHttp(s)UriPlugin() 选择加入

       异步模块

           异步的外部资源(async externals)

           新规范中的 WebAssembly 模块

           使用顶层 Await 的 ECMAScript 模块

   支持安全的 node.js 生态特性解析

       现在支持 package.json 中的 exports 和 imports 字段

       原生支持 Yarn PnP

   构建优化

       嵌套的 tree-shaking

       内部模块 tree-shaking

       CommonJs Tree Shaking

       副作用分析

   性能优化

       持久缓存

       编译器闲置和关闭

       文件生成

下面选取一些分析一下。

最小 Node.js 版本：10.13.0

最低支持的 Node.js 版本从 6 增加到 10.13.0

功能清除：清理弃用的能力

所有在 webpack4 里面被废弃的能力都被清除，因此需要确保 webpack4 没有打印警告 。

requre.includes 语法已被废弃（作用：实现一个模块预加载）

   可以通过 Rule.parser.requirelnclude 将行为改为允许、废弃或禁用。

功能清除：不再为 Node.js 模块引入 polyfill

之前的版本是：如果某个模块依赖 Node.js 里面的核心模块，那么这个模块被引入的时候会把 Node.js 整个 polyfill 顺带引入。

webpack4：里面利用 node-libs-browser 这个实现 polyfill 的。

webpack5

长期缓存：确定的模块 ld、chunk 和导出名称

在生产模式下，默认的 chunklds: "deterministic", modulelds:“deterministic"。设置成 deterministic 时默认最小3位数字会被使用

chunklds

modulelds

例子：

webpack4：1，2，3... 递增的方式

webpack5：数字是确定的，比如多个 import 模块时，不会因为一个变化了而产生变化。

持久化缓存

在 webpack4 里面，可以使用 cache-loader 将编译结果写入硬盘缓存，还可以使用 babel-loader,设置 option.cacheDirectory 将 babel-loader 编译的结果写进磁盘。

webpack5缓存策略

• 默认开启缓存，缓存默认是在内存里。可以对 cache 进行设置。
• 缓存淘汰策略：文件缓存存储在 node_ modules/.cache/webpack，最大 500 MB, 缓存时常两个星期，旧的缓存先淘汰

构建优化

Tree Shaking 优化 — 嵌套的 Tree shaking

例子：module.js 里使用了 inner.js，然后 user.js 里使用了 module.js 文件

webpack4：

webpack5：

Tree Shaking 优化 — 内部模块 Tree shaking

例子：usingSomething 里使用了 something，test 里使用了 usingSomething，但是 test 未被使用。

webpack4 会打包进去

webpack5 里可以分析模块之间的关系（内部通过一个 innerGraph 算法去实现），上面不会打包

代码生成：支持生成 ES6 代码

webpack4 之前只生成 ES5 的代码。

webpack5 则现在既可以生成 ES5 又可以生成 ES6/ES2015 代码。

两种设置方式：5 =< ecmaVersion <= 11 或 2009 =< ecmaVersion <= 2020

比如：写 2015 也是可以的

开创性的特性：模块联邦

发明者：Zack Jackson

模块联邦可以实现微前端。

基本解释：使一个 JavaScript 应用在运行过程中可以动态加载另一个应用的代码， 并支持共享依赖(CDN)。不再需要本地安装 Npm 包。

   Remote：被依赖方，被 Host 消费的 Webpack 构建

   Host：依赖方，消费其他 Remote 的 Webpack 构建

一个应用可以是 Host，也可以是 Remote，也可以同时是 Host 和 Remote。

ModuleFederationPlugin 介绍

Webpack 内部通过 ModuleFederationPlugin 插件将多个应用结合起来。

   name：必须，唯一 ID, 作为输出的模块名，使用的时通过 ${name}/${expose} 的方式使用

   library：必须，其中这里的 name 为作为 umd 的 name; .

   remotes：可选，表示作为 Host 时，去消费哪些 Remote;

   shared：可选，优先用 Host 的依赖，如果 Host 没有，再用自己的;

   main.js：应用主文件

   remoteEntry.js：作为 remote 时被引的文件

模块联邦使用案例

应用 host：要去消费 app2，端口号 3002

应用 remote：提供了 Button 组件

浏览器的效果

app1 应用使用了 app2 的 Button 组件端口为 3001

app1 怎么找到 app2 的？

通过 remoteEntry.js 找到生产者的模块。

app2 提供了 button

app1 使用 button

这样就达到了组件的共享。

打包构建之后，可以看到 remoteEntry.js 里面有 moduleMap，并且提供了get 方法。