从webpack3迈向webpack4

Webpack3 与 Webpack4 的差异

Webpack4 作为 Webpack3 的后续版本，在功能上进行了重大更新，带来了许多新特性和改进。其中，最值得关注的变化之一便是 CommonsChunkPlugin 的移除。在 Webpack3 中，CommonsChunkPlugin 用于将公共模块提取到单独的 chunk 中，以减少重复代码并优化加载性能。然而，在 Webpack4 中，CommonsChunkPlugin 已被废弃，取而代之的是 SplitChunksPlugin。

Webpack4 中的 SplitChunksPlugin

SplitChunksPlugin 是 Webpack4 中引入的新插件，它提供了更强大的代码分割功能，可以根据各种条件自动提取公共模块。SplitChunksPlugin 的使用更加灵活，并且支持更多的配置选项，使开发者能够更加精细地控制代码分割行为。

SplitChunksPlugin 的基本配置

SplitChunksPlugin 的基本配置选项包括：

• chunks：指定要应用代码分割的 chunk 类型。可以是 all、async、initial 或 vendor。
• minChunks：指定要提取公共模块的最小 chunk 数。
• minSize：指定要提取公共模块的最小大小。
• maxAsyncRequests：指定异步 chunk 的最大请求数。
• maxInitialRequests：指定初始 chunk 的最大请求数。

SplitChunksPlugin 的高级配置

SplitChunksPlugin 还提供了许多高级配置选项，可以帮助开发者更加精细地控制代码分割行为。这些高级配置选项包括：

• cacheGroups：指定要提取公共模块的缓存组。缓存组可以根据模块的名称、路径、大小等条件进行配置。
• automaticNameDelimiter：指定自动生成的 chunk 名称的分隔符。
• name：指定提取公共模块的 chunk 的名称。
• sizeThreshold：指定提取公共模块的最小大小阈值。

Webpack3 到 Webpack4 的升级指南

如果你正在使用 Webpack3，那么可以按照以下步骤升级到 Webpack4：

1. 安装 Webpack4：

npm install webpack@4

2. 修改 Webpack 配置文件：

• 将 CommonsChunkPlugin 替换为 SplitChunksPlugin。
• 根据需要配置 SplitChunksPlugin 的选项。

3. 运行 Webpack：

webpack

结语

Webpack4 中引入的 SplitChunksPlugin 为代码分割提供了更强大的功能和更灵活的配置选项。通过使用 SplitChunksPlugin，开发者可以更加轻松地优化 Webpack 构建流程，提高代码的可读性和可维护性。希望本文能够帮助你顺利完成 Webpack3 到 Webpack4 的升级，并充分利用 Webpack4 的新特性，打造出更加高效、可靠的前端项目。