大家好，这是一个更文挑战。这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战
清除过期功能
- 清理已弃用的功能: 所有在 Webpack 4 标记即将过期的功能，都已在该版移除
- 不再为Node.js 模块自动引用Polyfills（Polyfills是一个语法检查的模版工具），需要手动添加适合的 Polyfills
针对长期缓存的优化
新增了长期缓存的算法，生产模式下是默认启用，如下:
chunkIds: "deterministic"
moduleIds: "deterministic"
moduleIds: "deterministic"
内容哈希
使用真正的文件内容哈希值，只有注释被修改或变量被重命名时，这对长期缓存会有积极影响。这些变化在压缩后是不可见的
模块联邦（这个很重要）
webpack5新内置的一个重要功能，允许多个 Webpack 一起工作，可以让跨应用间真正做到模块共享
模块联邦本身是一个普通的 Webpack 插件 ModuleFederationPlugin，插件有几个重要参数：
name当前应用名称，需要全局唯一。remotes可以将其他项目的name映射到当前项目中。exposes表示导出的模块，只有在此申明的模块才可以作为远程依赖被使用。shared是非常重要的参数，制定了这个参数，可以让远程加载的模块对应依赖改为使用本地项目的 React 或 ReactDOM。
总结： 模块联邦为更大型的前端应用提供了开箱解决方案，并已经作为 Webpack5 官方模块内置，可以说是继 Externals 后最终的运行时代码复用解决方案
对Web 平台功能的全新支持
JSON 模块
-
使用自定义的 JSON 解析器：Rule.parser.parse 中指定
-
未使用的属性也会被 optimization.usedExports 优化丢弃
-
属性会被 optimization.mangleExports 优化打乱
ProgressPlugin插件的优化
不仅可以统计模块编译的进度，也可以统计 入口 和 依赖
自动添加唯一命名
Webpack 4 中，多个Webpack同时运行时可能会在同一个 HTML 页面上发生冲突,这时候会在output.jsonpFunction配置提供一个自定义的，Webpack 5 会从 package.json name 中自动推断出一个唯一的构建名称，并将其作为 output.uniqueName 的默认值，可将output.jsonpFunction删除
Typescript 类型
Webpack 5 可以从源码中生成 typescript 类型，并通过 npm 包暴露它们
构建优化
tree-shaking
-
内部模块tree-shakingWebpack 5 有一个新的选项 optimization.innerGraph，在生产模式下是默认启用的，它可以对模块中的标志进行分析，找出导出和引用之间的依赖关系。
-
嵌套的tree-shakingWebpack能够跟踪对导出的嵌套属性的访问，因此可以改善重新导出命名空间对象时的 Tree Shaking（
-
CommonJs Tree ShakingWebpack 5 增加了对一些 CommonJs 构造的支持，允许消除未使用的 CommonJs 导出，并从 require() 调用中跟踪引用的导出名称
代码块拆分与模块大小
- 支持对模块按照大小进行拆分
- SplitChunksPlugin 插件知道如何处理这些不同模块的大小，并为它们设置 minSize 和 maxSize
module.exports = {
optimization: {
splitChunks: {
minSize: {
javascript: 30000,
webassembly: 50000,
},
},
},
};
性能优化
持久缓存
有一个文件系统缓存，它是可选的, 配置如下：
module.exports = {
cache: {
// 1. 将缓存类型设置为文件系统
type: 'filesystem',
buildDependencies: {
// 2. 将你的config 添加为 buildDependency，以便在改变 config 时获得缓存
config: [__filename],
// 3. 如果有其他的东西需要被构建依赖，可以在这里添加它们
// 注意，webpack、加载器和所有从你的配置中引用的模块都会被自动添加
},},
};
持久性缓存将根据使用情况自动创建多个缓存文件，以优化对缓存的读写访问。默认情况下，时间戳将用于开发模式的快照，而文件哈希将用于生产模式。文件哈希也允许在 CI 中使用持久性缓存
以上。
