Webpack 5 正式发布
Webpack简介
随着前端发展如日冲天，前端项目也越来越复杂，得益于Nodejs的发展，前端模块化、组件化、工程化也大势所趋。伴随着前端的模块化和工程化，Grunt、Gulp到Webpack等项目构建和打包工具也随之出现。
前端工程化的早期，主要是解决重复任务的问题。Grunt、Gulp就是其中代表，他们的主要功能是完成文件压缩、编译less、sass、地址添加hash、替换等。不过，随着前端工程化的发展，Webpack出现了，与其说是一个工程构建工具，Webpack更像是一套前端工程化解决方案。
根据官方资料介绍，Webpack 是一个前端资源加载和打包工具。所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，Webpack就将这些静态资源文件称之为模块。 Webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的依赖关系，所以具有更强大的JS模块化的功能，它能对静态资源进行统一的管理以及打包发布。作为一款 Grunt和Gulp的替代产品，Webpack受到大多数开发者的喜爱，因为它能够编译打包CSS，做CSS预处理，对JS的方言进行编译，打包图片，代码压缩等等。
Webpack 5
自2018 年 2 月Webpack4 发布以来，Webpack 就一直没有更进一步的重大更新，为了保持 API 的一致性，旧的架构没有做太多改变，遗留了很多的包袱。或许是沉寂太久，2020 年 10 月 10 日，Webpack 正式发布了 5.0 版本。Webpack 5带来了哪些新的特性呢？
- 尝试用持久性缓存来提高构建性能。
- 尝试用更好的算法和默认值来改进长期缓存。
- 尝试用更好的 Tree Shaking 和代码生成来改善包大小。
- 尝试改善与网络平台的兼容性。
- 尝试在不引入任何破坏性变化的情况下，清理那些在实现 v4 功能时处于奇怪状态的内部结构。
- 试图通过现在引入突破性的变化来为未来的功能做准备，尽可能长时间地保持在 v5 版本上。
下面就让我们来看一下，Webpack 5带来的一些新的特性。
1， 清除过期功能
1.1 清理已弃用的功能
所有在 Webpack 4 标记即将过期的功能，都已在该版移除。因此在迁移到 Webpack 5 之前，请确保你在 Webpack 4 运行的构建不会有任何的功能过期警告，否则迁移到Webpack 5之后就会报错。
1.2 不再为Node.js 模块自动引用Polyfills
在 Webpack 4 或之前的版本中，任何项目引用 Node.js 内置模块都会自动添加 Polyfills，Polyfills是一个语法检查的模版工具。不过，Webpack 5不再为 Node.js 内置模块自动添加 Polyfills，Webpack 5会投入更多的精力到前端模块的兼容性工作中。
如果你的代码中有引用这些 Node.js 的模块，当需要升级到 Webpack 5版本时， 请将尽量使用前端的模块，或者自行手动添加适合的 Polyfills。
2. 针对长期缓存的优化
2.1 确定的 Chunk、模块 ID 和导出名称
Webpack 5新增了长期缓存的算法，这些算法在生产模式下是默认启用的，语法格式如下。
chunkIds: "deterministic"
moduleIds: "deterministic"
mangleExports: "deterministic"
该算法以确定性的方式为模块和分块分配短的（3 或 5 位）数字 ID，这是包大小和长期缓存之间的一种权衡。由于这些配置将使用确定的 ID 和名称，这意味着生成的缓存失效不再更频繁。
2.2 真正的内容哈希
当使用[contenthash]时，Webpack 5 将使用真正的文件内容哈希值。之前它 "只 "使用内部结构的哈希值。当只有注释被修改或变量被重命名时，这对长期缓存会有积极影响。这些变化在压缩后是不可见的。
3. 更好的开发支持
在开发模式下，默认启用的新命名代码块 ID 算法为模块（和文件名）提供了人类可读的名称。
模块 ID 由其路径决定，相对于 context。代码块 ID 由代码块的内容决定。
所以你不再需要使用import(/* webpackChunkName: "name" */ "module")来调试。但如果你想控制生产环境的文件名，还是有意义的。
可以在生产环境中使用 chunkIds: "named" 在生产环境中使用，但要确保不要不小心暴露模块名的敏感信息。如果你不喜欢在开发中改变文件名，你可以通过 chunkIds: "natural" 来使用旧的数字模式。
3.2 模块联邦
Webpack 5 增加了一个新的功能 “模块联邦”，它允许多个 Webpack 一起工作。从运行时的角度来看，多个构建的模块将表现得像一个巨大的连接模块图。从开发者的角度来看，模块可以从指定的远程构建中导入，并以最小的限制来使用。
4. 对Web 平台功能的全新支持
4.1 JSON 模块
比如对 JSON 模块，会与现在的提案保持一致，并且要求进行默认的导出，否则会有警告信息。即使使用默认导出，未使用的属性也会被 optimization.usedExports 优化丢弃，属性会被 optimization.mangleExports 优化打乱。
如果想用自定义的 JSON 解析器，可以在 Rule.parser.parse 中指定一个自定义的 JSON 解析器来导入类似 JSON 的文件（如toml、yaml、json5 等）。
4.2 资源模块
Webpack 5 现在已经对表示资源的模块提供了内置支持。这些模块可以向输出文件夹发送一个文件，或者向 Javascript 包注入一个 DataURI。 无论哪种方式，它们都会给出一个 URL 来让程序正常工作。
import url from "./image.png" //老方法
new URL("./image.png", import.meta.url) //新方法
选择 "新的方式 "语法是为了允许在没有打包工具的情况下运行代码。这种语法也可以在浏览器中的原生 ECMAScript 模块中使用。
4.3 原生 Worker 支持
当把资源的 new URL 和 new Worker/new SharedWorker/navigator.serviceWorker.register 结合起来时，Webpack 会自动为 Web Worker 创建一个新的入口点（entrypoint），如下所示。
new Worker(new URL("./worker.js", import.meta.url))
选择这种语法也是为了允许在没有打包工具的情况下运行代码。这种语法在浏览器的原生 ECMAScript 模块中也可以使用。
4.4 URIs
Webpack 5 支持在请求中处理网络协议，比如：
- 支持data：支持 Base64 或原始编码。Mimetype 可以在module.rule中被映射到加载器和模块类型。例如：import x from “data:text/javascript,export default 42”。
- 支持file：支持file文件类型。
支持http(s)：需要通过new webpack.experiments.s schemesHttp(s)UriPlugin()选择加入。
4.5 异步模块
Webpack 5 支持所谓的 “异步模块”。这些模块并不是同步解析的，而是基于异步和 Promise 的。通过import 导入它们会被自动处理，不需要额外的语法，而且几乎看不出区别。通过require()导入它们会返回一个解析到导出的 Promise。在 Webpack 中，有多种方式来拥有异步模块，常见的方式如下：
- 异步的外部资源(async externals)
- 新规范中的 WebAssembly 模块
- 使用顶层 Await 的 ECMAScript 模块。
4.6 外部资源
Webpack 5 增加了更多的外部类型来支持更多的应用。
promise: 一个评估为 Promise 的表达式，外部模块是一个异步模块，解析值作为模块导出使用。
import：原生的 import() 用于加载指定的请求，外部模块是一个异步模块，解析值作为模块导出，外部模块是一个异步模块。
module：尚未实现，但计划通过 import x from “…” 加载模块。
script：通过