Webpack 5 + Webpack-Chain 搭建大型应用系列 2（附 VSCode 和 Prettier 配置）

在上一篇文章《一步步从零开始用 Webpack 搭建一个大型项目》中，我们介绍了如何从头开始使用 Webpack 构建一个大型项目。本文将继续使用 Webpack 5 重构该项目，并全程使用 Webpack-Chain 来配置 Webpack。

Webpack-Chain 简介

Webpack-Chain 是一个用于配置 Webpack 的库，它提供了一个链式 API，可以更轻松地编写 Webpack 配置文件。Webpack-Chain 的优势在于：

• 更容易编写复杂的配置
• 更容易维护配置
• 更容易重用配置
• 更容易理解配置

项目配置

我们使用 Webpack-Chain 重构了项目的配置，每个功能都放在独立的文件中，以便在其他项目中使用。以下是项目的配置目录结构：

├── webpack.config.js
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
├── webpack.chain.config.js
├── webpack.plugins.js
└── webpack.utils.js

• webpack.config.js：这是项目的根配置文件，它负责加载其他配置文件。
• webpack.common.js：这个文件包含一些公共的配置，如入口文件、输出目录、加载器等。
• webpack.dev.js：这个文件包含开发环境的配置，如热更新、source map 等。
• webpack.prod.js：这个文件包含生产环境的配置，如代码压缩、tree shaking 等。
• webpack.chain.config.js：这个文件使用 Webpack-Chain 来配置 Webpack。
• webpack.plugins.js：这个文件包含一些常用的插件，如 CleanWebpackPlugin、MiniCssExtractPlugin 等。
• webpack.utils.js：这个文件包含一些工具函数，如获取项目根目录、获取环境变量等。

VSCode 和 Prettier 配置

为了提高开发效率，我们还配置了 VSCode 和 Prettier。以下是 VSCode 的配置：

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "prettier.printWidth": 100,
  "javascript.validate.enable": false
}

以下是 Prettier 的配置：

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100
}

性能优化

我们在项目中还做了性能优化，包括：

• 代码拆分
• Tree shaking
• 代码压缩

这些优化措施可以显著提高项目的加载速度和性能。

结语

本文介绍了如何使用 Webpack 5 和 Webpack-Chain 重构一个大型应用，并提供了每个功能的独立文件，以便在其他项目中使用。该项目配置适用于任何项目，可实战。