Webpack 5 升级要点

问题

Webpack 5 相比之前版本有哪些主要升级点？

解答

持久缓存

Webpack 5 引入了更稳定的持久缓存机制，通过文件系统缓存显著提升二次构建速度。

module.exports = {
  cache: {
    type: 'filesystem', // 使用文件系统缓存
    buildDependencies: {
      config: [__filename] // 配置文件变化时使缓存失效
    }
  }
};

模块联邦

允许多个独立的 Webpack 构建共享模块，支持微前端架构。

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      remotes: {
        app2: 'app2@http://localhost:3002/remoteEntry.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

Tree Shaking 优化

改进了未使用代码的检测和删除能力，支持嵌套的 tree-shaking 和对 CommonJS 的部分支持。

代码分割优化

重新设计了 optimization.splitChunks，提供更灵活的配置。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    }
  }
};

原生支持 WebAssembly

无需额外配置即可导入和使用 .wasm 文件。

移除废弃特性

删除了 Node.js polyfills、require.ensure 等过时 API，需要注意兼容性问题。

关键点

• 持久缓存机制大幅提升构建性能，支持文件系统缓存
• 模块联邦是最重要的新特性，实现跨应用的模块共享
• Tree Shaking 和代码分割能力增强，优化产物体积
• 原生支持 WebAssembly，无需额外配置
• 移除了 Node.js polyfills 等废弃特性，升级时需检查兼容性