Webpack 5的十大提升配置技巧

前言

Webpack 5的新特性和改进为前端开发者提供了更强大、更高效的构建工具。通过内置的持久性缓存插件、优化的默认配置、Webpack CLI的改进等，Webpack 5使得构建过程更加简化，性能更加优越

持久性缓存：更快的构建速度和优化

Webpack 5引入的持久性缓存机制可谓是一大亮点。通过使用文件内容的哈希来生成缓存文件名，Webpack 5能够在文件内容未发生变化时重用之前构建的结果，从而大大提高构建速度。如何配置呢？

在你的Webpack配置文件中，只需添加以下选项：

module.exports = {
  // ...其他配置项
  cache: {
    type: 'filesystem',
  },
};

1
2
3
4
5
6
7

这样，Webpack将使用文件系统来缓存构建结果，从而加快后续构建过程。

模块联邦：拆分应用，共享模块

Webpack 5引入的模块联邦是一个革命性的特性，特别适用于微前端架构。它允许不同应用之间共享模块，降低了应用之间的耦合度。假设我们有两个应用app1和app2，让我们看看如何配置来实现模块共享：

// app1的webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里，app1通过remotes配置引入了app2的模块，并通过shared配置共享了React和React DOM。

改进的Tree Shaking：减小文件体积

Tree Shaking是Webpack 5的一个强大功能，通过优化模块依赖关系，消除未使用的代码，从而减小最终生成文件的体积。这是如何实现的呢？

首先，确保在Webpack配置中启用了mode选项，通常选择production模式：

module.exports = {
  mode: 'production',
  // ...其他配置项
};

1
2
3
4
5

接下来，Webpack会自动进行Tree Shaking，移除未使用的代码，从而生成更小的文件。

Top-level Await支持：更好的异步加载

Webpack 5允许在入口文件的顶层使用异步模块加载，这对于优化应用的异步加载行为非常有帮助。举个例子，如何在入口文件中使用顶层await：

// index.js
const module = await import('./myModule');
// 使用module...

1
2
3
4

这样，你可以在入口文件中直接使用异步加载模块，而无需在嵌套的回调中进行。

改进的代码生成：提高性能和加载速度

Webpack 5通过生成更紧凑、高效的代码，提升了应用的性能和加载速度。这是Webpack的一个重要优化，不需要额外的配置即可生效。

内置的持久性缓存插件：简化构建结果缓存

Webpack 5内置了一个持久性缓存插件，使构建结果的缓存更加方便。这个插件会将构建产物缓存到本地的.cache目录中，以便于重复利用。你可以通过以下步骤启用它：

首先，在你的Webpack配置文件中引入插件：

const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');

1
2

然后，在插件配置中使用持久性缓存插件：

module.exports = {
  // ...其他配置项
  cache: {
    type: 'filesystem',
  },
};

1
2
3
4
5
6
7

这个插件将自动将构建结果缓存到本地文件系统中，加速后续的构建过程。

优化的默认配置：更小、更快的构建结果

Webpack 5对默认配置进行了优化，生成的构建结果更小、更快。这意味着在初始阶段，你无需进行过多的配置，就可以得到更好的性能表现。

例如，当你在开发模式下构建时，Webpack 5会自动开启开发服务器的热模块替换（HMR）功能，加速开发流程：

module.exports = {
  // ...其他配置项
  mode: 'development',
  devServer: {
    hot: true,
  },
};

1
2
3
4
5
6
7
8

这使得开发者可以在开发中更快地看到代码变化的效果。

Webpack CLI改进：更好的开发者体验

Webpack 5引入了一些新的CLI命令和选项，提供了更好的开发者体验。例如，webpack serve命令可以方便地启动开发服务器，并且自带了热模块替换（HMR）功能：

npx webpack serve --open

1
2

这将启动开发服务器，并自动在浏览器中打开应用。

性能优化：更快的构建速度和更好的性能

Webpack 5在构建速度和整体性能方面进行了优化。通过改进构建算法、引入新的缓存机制等，Webpack 5能够更快地构建项目，同时生成更小、更高效的代码。

废弃特性的移除：更简洁、明了的配置

1. 废弃的Node.js版本支持： Webpack 5移除了对Node.js 6、8、9的支持，因为这些版本已经过时。它要求使用Node.js 10或更高版本。
2. 废弃的chunk.entryModule属性： 在Webpack 4中，chunk.entryModule属性用于访问chunk的入口模块。在Webpack 5中，这一属性被移除了，开发者需要使用其他方式获取这个信息。
3. 废弃的AggressiveSplittingPlugin插件： 这个插件在Webpack 4中用于优化代码分割，但由于Webpack 5引入了更强大的代码分割策略，AggressiveSplittingPlugin插件被移除了。
4. 废弃的chunk.origins属性： 在Webpack 4中，chunk.origins属性用于获取chunk的来源。在Webpack 5中，这个属性被移除了，开发者需要使用其他方式获取来源信息。
5. 废弃的optimization.removeAvailableModules选项： 这个选项在Webpack 4中用于配置是否移除已经被提取的模块，以减小最终生成文件的体积。在Webpack 5中，这个选项被移除了，相关的功能通过其他方式实现。
6. 废弃的optimization.removeEmptyChunks选项： 这个选项在Webpack 4中用于配置是否移除空的代码块。在Webpack 5中，这个选项被移除了，相应的优化通过其他方式实现。
7. 废弃的optimization.concatenateModules选项： 这个选项在Webpack 4中用于配置是否将模块合并为一个。在Webpack 5中，这个选项被移除了，合并模块的功能通过其他方式实现。