**Webpack 5 多页面应用构建详解**
Webpack 5 是一款强大的模块打包工具，它能够将 JavaScript、CSS、图片等静态资源转换成浏览器可以识别的格式。在开发大型多页面应用时，合理地配置和使用 Webpack 可以极大地提高工作效率。本教程将围绕 "webpack-multiple" 这个基于 Webpack 5 的多页面脚手架进行深入讲解。
### 一、Webpack 5 的新特性
Webpack 5 引入了许多改进和优化，包括：
1. **Blob API 改进**：现在可以使用原生 Blob API 读取和写入文件，提高了性能。
2. **二进制缓存**：引入了新的文件系统缓存机制，加快了构建速度。
3. **更大的默认内存缓存**：提高了内存利用率，减少了磁盘 I/O。
4. **TypeScript 支持**：对 TypeScript 的内置支持更加完善。
5. **模块联邦（Module Federation）**：允许跨项目共享代码，实现微前端架构。
### 二、多页面配置
在多页面应用中，每个页面都有自己的入口文件和 HTML 模板。"webpack-multiple" 脚手架通过以下方式实现了多页面配置：
1. **entry** 配置：每个页面对应一个 entry 点，例如 `entry: { page1: './src/page1.js', page2: './src/page2.js' }`。
2. **html-webpack-plugin**：为每个页面生成对应的 HTML 文件，并自动引入构建后的 JS 文件。
3. **output.filename 和 output.path**：根据页面生成不同的输出文件路径和文件名。
### 三、Babel 7 与 ES6+ 转换
Babel 7 是一个广泛使用的 JavaScript 编译器，用于将 ES6+ 语法转换为浏览器兼容的 ES5 语法。在 "webpack-multiple" 中，配置 Babel 可以确保老版本浏览器也能运行代码：
1. 安装相关依赖：`@babel/core`, `@babel/preset-env`, `@babel/plugin-transform-runtime` 等。
2. 在 `.babelrc` 文件中配置 Babel，指定预设和插件。
### 四、ESLint 与 Prettier
为了保持代码风格的一致性和可读性，"webpack-multiple" 使用 ESLint 进行代码规范检查，Prettier 进行代码格式化：
1. 安装 ESLint 和相关规则集，如 `eslint-config-airbnb` 或自定义规则。
2. 配置 `.eslintrc.js`，定义规则和排除文件。
3. 安装 Prettier 并配置 `.prettierrc`，设定格式化规则。
4. 可以通过 ESLint 插件 `eslint-plugin-prettier` 结合 Prettier 使用，使格式化和规范检查融为一体。
### 五、其他重要插件与优化
1. **CleanWebpackPlugin**：清理每次构建生成的旧文件。
2. **MiniCssExtractPlugin**：将 CSS 提取到单独的文件中，提升页面加载速度。
3. **HtmlWebpackPlugin**：自动注入构建后的 CSS 和 JS 文件到 HTML 中。
4. **SourceMap**：生成 SourceMap，方便在浏览器中调试原始代码。
5. **SplitChunksPlugin**：代码分割，提取公共模块，减少重复加载。
### 六、实际应用与扩展
"webpack-multiple" 脚手架是多页面应用开发的一个良好起点，可以根据项目需求进一步定制。例如，添加图片优化、按需加载、服务端渲染等功能，以提升用户体验和应用性能。
总结，"webpack-multiple" 是一个基于 Webpack 5 的多页面脚手架，它利用了 Webpack 5 的新特性，并结合 Babel 7 进行 ES6+ 语法转换，使用 ESLint 和 Prettier 保证代码质量。这个脚手架提供了一个高效、可扩展的多页面应用构建基础，对于开发者来说，是一个极好的学习和实践平台。
