Webpack4多页应用配置优化及实战踩坑指南

本文将深入探讨多页应用在Webpack 4中的配置优化策略以及遇到的一些常见问题和解决方法。Webpack 4相较于早期版本有着显著的改进，例如内置了许多功能，使得配置更加简洁。在使用Webpack 4时，不再需要像过去那样手动添加诸如代码压缩（通过uglify插件）和作用域提升（通过ModuleConcatenationPlugin）等插件，只需设置mode为production即可自动处理。 文章的重点在于打包优化，特别是在多页应用构建中如何管理依赖。作者提到，通常会将以下类型的chunk进行分离： 1. **common chunk**：用于存放被多个页面共享的依赖，一般推荐在引入次数达到页面数量的1/3或以上时才被打包，以减少重复加载。 2. **DLL (Dynamic Link Libraries)**：包含那些每个页面都会用到且基本保持不变的依赖（如React和ReactDOM），这样可以避免其他模块变动导致的DLL库哈希值变化，提高缓存效率。 3. **Manifest**：webpack的运行时代码，由于其随依赖变化而变化，将其单独抽出可以降低common chunk哈希值变动的风险。 在实际操作中，每一页的入口文件（如page.js）会引用相应的chunk，并可能需要进行额外的命名和版本控制。此外，文章还提醒读者，虽然Webpack 4简化了很多配置，但迁移过程仍需谨慎，最好从头开始设计新的配置，而不是直接从旧配置中删除和修改，以便更好地利用Webpack 4的优势。 在整个过程中，读者可能会遇到一些技术细节，如如何配置externals、splitChunks策略等，对于不熟悉Webpack配置的读者，作者建议查阅相关文档或在线资源，以获取更深入的理解。本文是一篇实用的指南，对于正在或计划使用Webpack 4进行多页应用开发的开发者来说，提供了有价值的参考和实践经验。