Webpack 4 与 Webpack 5 相比有哪些核心变革与重大升级？

Webpack 5 于 2020 年正式发布，相比 Webpack 4，它不仅是一次巨大的版本迭代，更是对构建性能、代码体积、现代 Web 标准支持以及微前端架构的一次重构级升级。

以下是 Webpack 5 相比 Webpack 4 的核心变革与重大升级：

这是 Webpack 5 最受瞩目的“杀手级”特性，彻底改变了微前端架构的实现方式。

Webpack 4：跨应用共享代码通常需要打包发布到 npm，或者使用 iframe / externals，存在加载慢、版本冲突、更新繁琐等问题。
Webpack 5：允许一个 Webpack 构建的应用在运行时直接动态加载另一个 Webpack 应用的代码（无论是组件、函数还是逻辑），且无需安装 npm 包。
- 共享依赖：自动协同两个应用间的依赖，避免重复加载（如 React 库只加载一份）。
- 彻底打破了单体应用的构建边界，是微前端的最佳落地方案之一。

Webpack 4：只支持内存缓存。要实现二次构建加速，必须依赖第三方插件或 Loader，如 cache-loader、hard-source-webpack-plugin 或 Babel 的 cacheDirectory，配置繁琐且容易出 bug。
Webpack 5：原生提供了基于文件系统的持久化缓存。
javascript
```
// webpack.config.js
module.exports = {
  cache: {
    type: 'filesystem', // 设置为文件系统缓存
  },
};
```
- 效果：二次构建（Rebuild）的速度提升了 数倍甚至数十倍，极大地改善了大厂大型项目的开发体验（DX）。

在处理图片、字体、媒体等静态资源时：

Webpack 4：必须安装并配置 file-loader、url-loader、raw-loader。
Webpack 5：内置了资源模块，彻底废弃了上述 Loader。
- asset/resource 替代 file-loader（发送独立文件）
- asset/inline 替代 url-loader（导出 Base64 URI）
- asset/source 替代 raw-loader（导出源码字符串）
- asset 自动选择（替代带 size 限制的 url-loader）

Webpack 5 重新编写了代码分析引擎，Tree Shaking 能力大幅提升：

嵌套 Tree Shaking（Nested Tree Shaking）：能够跟踪深层嵌套属性的导出。

javascript

// Webpack 4 无法剔除 b，Webpack 5 可以
import * as object from './object';
console.log(object.a.inner); // 未使用的 object.b 会被剔除

内部模块 Tree Shaking（Inner Module Tree Shaking）：分析模块内部变量与导出的关联，排除未使用的代码。
CommonJS Tree Shaking：增加了对 CommonJS 模块格式的 Tree Shaking 支持（如 module.exports 和 require）。

Webpack 4：当在前端代码中使用 path、crypto、buffer 等 Node.js 核心模块时，Webpack 4 会自动打入巨大的浏览器端 Polyfill。这导致项目在不知情的情况下打包体积大幅膨胀。
Webpack 5：彻底移除了自动 Polyfill 行为。
- 如果项目确实需要在前端使用 Node.js 模块，必须手动在 resolve.fallback 中配置或安装相应的 Polyfill 包。
- 结果：极大地减小了打包后的最终文件体积（Bundle Size）。

Webpack 4：默认使用自增 ID（0, 1, 2...），或者需要配置 NamedModulesPlugin / HashedModuleIdsPlugin。一旦增删模块，整个项目的 ID 序号都会改变，导致浏览器缓存失效。
Webpack 5：生产环境下默认开启 deterministic（确定性）算法。
- 根据模块路径和内容生成短小、固定的数字 ID。
- 代码变动不会影响无关文件的 ID，彻底优化了浏览器长效缓存（Long-term Caching）。

原生支持 Web Worker：
- Webpack 4：需要依赖 worker-loader。
- Webpack 5：符合 Web 标准语法，无需 Loader 即可直接识别：
  javascript
```
new Worker(new URL('./worker.js', import.meta.url));
```
Top-Level Await：支持在模块的最外层直接使用 await，无需包裹在 async 函数中（需开启 experiments.topLevelAwait）。
默认输出 ES6 代码：Webpack 5 可以直接输出 ES6/ES2015 代码（箭头函数、const 等），不再强制抹平转换为 ES5，减小了转译体积。

建议： 对于新项目，应毫无疑问地选择 Webpack 5（或基于它的上层框架如 Next.js、Umi 4，或者新一代工具 Vite）；对于 Webpack 4 的老项目，如果面临构建太慢或包体积过大的问题，升级到 Webpack 5 会带来质的飞跃。

右滑查看面试常问

播面