Webpack5 中新增了什么特性？

Question

Webpack5 中新增了什么特性？

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

webpack5 新特性包括但不限于：

• 开箱即用的功能

  • 内置清除输出目录，5.x 版本中只要设置 output.clean = true 即可；4.x 版本中需要通过 clean-webpack-plugin 用来每次打包的时清空 dist 目录
  • 资源模块（asset module），5.x 版本中只要配置 output.assetModuleFilename 和 module.rules 中指定 type："asset/xxx" 的方式即可；4.x 版本中在需要通过不同的 loader  来处理不同的【静态资源文件】
  • 打包缓存，5.x 版本中提供了 filesystem 文件系统缓存实现持久缓存，cache.type = "filesystem" 缓存到 硬盘 disk 中，默认是缓存到 内存 memory 即 cache.type: "memory"；4.x 版本中需要使用 cache-loader 和 hard-source-webpack-plugin 来对打包结果进行缓存

• 模块联邦（Federated Module）

  • 模块联邦 可以让 跨应用 间真正做到模块共享，多个独立的应用可以组成一个应用程序，这些独立的应用可以【单独开发】和【独立部署】

• 真正的内容 hash（content hash）

  • 5.x 版本中使用 [contenthash] 时，会使用真正的文件内容生成哈希值，当只有【注释被修改】或【变量被重命名】时不会导致缓存失效，即重新生成的 contenthash 不会发生变更，因为这些变化在 压缩后 是不可见的
  • 4.x 版本中的 [contenthash]  只使用 内部结构 的哈希值，因此只要文件发生变动，就会生成新的 [contenthash] 直接导致缓存失效

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

1. 模块联邦：Webpack5 引入了一项名为“模块联邦”的特性，允许开发人员跨多个应用程序共享代码。通过使用模块联邦，不同的应用程序可以共享一些代码，从而减少了应用程序的体积，并提高了开发效率。
2. 改进的性能：Webpack5 通过引入新的持久性缓存机制，加快了构建速度。持久性缓存允许 Webpack 缓存每个模块的内容和 ID，并将它们存储在磁盘上，以便下次重新构建时能够快速加载。
3. Tree shaking 性能提升：Webpack5 通过改进其 Tree Shaking 算法来提高性能。现在，Webpack5 可以更好地识别哪些代码是不需要的，并将其从最终打包的代码中删除，从而减小了代码体积。
4. 新的 chunk 分离策略：Webpack5 引入了一个名为“chunk 分离策略”的特性，允许开发人员更好地控制代码的分离方式。开发人员现在可以根据需要将代码分离为不同的 chunk，从而减小了打包后的代码体积。
5. 默认使用 ES6 模块：Webpack5 现在默认使用 ES6 模块语法，而不是 CommonJS。这意味着开发人员可以在其代码中使用更先进的模块化语法，而不需要手动配置 Webpack。
6. 其他一些改进：Webpack5 还带来了其他一些改进，例如对 WebAssembly 的原生支持、对 CSS 的优化等等。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。