标签: 代码分割

Webpack 5仍是主流构建工具，支持模块化、生态成熟、可扩展。优化包括：`output.clean`替代插件清理资源、TS类型声明优化、xxHash64算法提升哈希速度、魔法注释增强模块加载。还讨论了Loader/Plugin开发、浏览器环境处理、资源模块化、未来趋势(Rspack/Turbopack)、争议解决及企业级实践案例。

升级 Next.js 14.0.4 报错Edge Function体积超限，源于Webpack配置变更导致SSR:false组件分割失败。解决方案包括配置`esm: true`强制ESM、升级Next.js至14.1.0+。工程优化需关注代码分割、资源压缩、第三方库管理和构建配置。

本文是Webpack 5 指南，涵盖了Webpack dev server配置、`clean-webpack-plugin`替代方案、pnpm类型声明问题及解决方案。重点介绍了模板字符串，chunkFilename，loader和plugin编写方式和执行顺序，以及魔法注释的用法。针对浏览器环境Node.js `fs`模块依赖问题，提供了Webpack和Next.js的解决方案。还介绍了Asset Modules，包括`asset/resource`, `asset/inline`, `asset/source`和`asset`。