Angular 5与Webpack：使用Angular-CLI的我真的需要它吗？

嘿，这是个非常实用的问题！很多刚用Angular CLI的开发者都会疑惑：既然默认命令用得好好的，为啥还要折腾webpack配置？我来一步步给你拆解清楚：

为什么需要执行eject或修改webpack配置？ #

Angular CLI的核心优势就是封装了复杂的webpack配置，让你不用关心底层细节就能快速开发。但它的默认配置是通用型的，当你遇到以下场景时，可能需要调整webpack：

• 需要添加自定义的loader（比如处理特殊格式的资源，如SVG sprite、Markdown文件）
• 要自定义打包拆分策略（比如把某个第三方库单独拆分成chunk，优化缓存）
• 集成特定的webpack插件（比如webpack-bundle-analyzer分析打包体积，或者自定义环境变量注入）
• 对打包输出有特殊要求（比如修改输出路径、文件名规则）

至于ng eject，这个命令现在已经不推荐使用了——它会把CLI封装的webpack配置全部暴露出来，而且是不可逆的操作，后续CLI版本更新时你无法再同步官方的配置优化。现在更推荐用「自定义构建器」（比如@angular-builders/custom-webpack），不用eject就能扩展webpack配置。

默认webpack配置是否足以满足生产需求？ #

绝大多数常规业务场景下，默认配置完全够用！Angular CLI的生产构建（ng build --prod）已经帮你做了这些关键优化：

• Tree Shaking：自动剔除未使用的代码
• 代码压缩（Terser）：压缩JS、CSS文件
• 缓存优化：给打包后的文件添加哈希后缀，配合浏览器缓存策略
• 懒加载支持：自动拆分路由模块，实现按需加载
• 环境变量替换：把生产环境的配置注入到代码中
• 依赖优化：自动处理第三方库的打包拆分

只有当你的项目有特殊需求（比如上面提到的自定义loader、插件），或者需要极致的性能优化（比如针对特定库做单独的代码压缩规则）时，才需要调整webpack。

国际化（i18n）场景下需要添加什么配置？ #

如果用Angular官方的i18n方案（基于@angular/localize），默认CLI命令就支持多语言构建：

ng build --prod --localize

这个命令会自动根据你配置的语言包，生成对应语言的打包文件夹。但如果需要更灵活的国际化方案（比如动态切换语言，不用重新构建），比如使用@ngx-translate/core，可能需要调整webpack：

• 确保翻译文件（通常是JSON格式）被正确打包：webpack5默认支持JSON，一般不用额外配置；如果是旧版本，可添加json-loader
• 拆分翻译资源：如果翻译文件很大，可以用webpack的splitChunks配置，把翻译文件单独拆分成chunk，避免主包过大
• 处理特殊翻译格式：如果用PO文件等格式，需要添加对应的loader（比如po-loader），在webpack配置中注册这个loader

开发流程中该如何处理webpack？ #

给你几个最佳实践：

1. 优先用CLI默认命令：日常开发用ng serve，生产构建用ng build --prod，尽量不要手动修改webpack配置
2. 用自定义构建器扩展配置：如果需要自定义，安装@angular-builders/custom-webpack，然后在angular.json中修改build和serve的builder为@angular-builders/custom-webpack:browser和@angular-builders/custom-webpack:dev-server，再指定一个额外的webpack配置文件（比如webpack.extra.js），CLI会自动合并默认配置和你的自定义配置
3. 调试打包细节：用ng build --verbose查看打包的详细日志，或者集成webpack-bundle-analyzer插件，可视化分析打包后的文件体积，找出需要优化的点
4. 不要轻易eject：除非你完全确定不需要CLI的后续更新支持，否则别用ng eject，自定义构建器是更安全的方案

内容的提问来源于stack exchange，提问作者noririco