使用被弹出的Angular 4应用程序进行生产编译会生成较大的文件。

Question

ng build --prod 是Angular4应用中生成高度压缩的JavaScript文件的CLI命令。

当使用命令ng eject退出应用时，Angular CLI命令消失了，我们只剩下npm脚本（运行npm run build命令来构建应用），但不幸的是，该命令输出了一个非生产版本的构建。

我尝试直接运行webpack -p命令，但与ng build --prod命令的输出结果相比，输出结果略微较大。

如何在已退出的应用中获得等同于ng build --prod命令的压缩效果呢？哪个命令/参数可以产生这样的结果？

- To Ka

Answer 1

您可以使用以下命令弹出Webpack配置的生产版本：

ng eject --prod

编辑

如果您想要同时使用已弹出的 webpack 配置的开发和生产版本，请执行以下操作：

1. 备份您现有的package.json

2. 执行ng eject --prod（这将弹出 webpack 配置的生产版本）

3. 重命名已弹出的webpack.config.json为webpack.config-prod.json

4. 恢复您备份的package.json（实际更改基本上是脚本和一些新包）。您还可以编辑.angular-cli.json并将ejected属性更改为false。
5. 执行ng eject（这将弹出开发版本）。

现在，您拥有了 webpack 配置的生产和开发版本。现在，要编译用于生产的 Angular 项目，请执行webpack --config webpack.config-prod.js，您还可以将其添加到您的 package.json 脚本中以方便使用。

然而，这可能不是最完美的方法，但这是我在这里所做的。如果有更好的版本，请随意编辑。

- user4406073

---

命令已经生效。在弹出后，我运行了构建，并且缩小到了我需要的方式。但不幸的是，我不能再以开发者模式运行该应用程序。当我运行“npm start”命令时，会出现错误提示：“webpack-dev-server is not recognized as an internal or external command”。那么，有没有办法在不使用CLI的情况下同时在两种模式（dev/prod）中使用弹出的应用程序呢？我正在寻找一种解决方案，可以不进行任何手动干预，即开箱即用的解决方案。 - To Ka

我最终做的是使用 ng eject 和 ng eject --prod 生成了一个非生产环境和一个生产环境的配置版本（请注意，在第一次弹出后，您可能需要还原 package.json），然后在构建生产环境时使用生产版本的 webpack 配置，如下所示：webpack --config <prod-webpack-config>。 - user4406073

这是一个很好的解决方案！谢谢。请更新您的原始答案并包括您在评论中写的内容，以便观众轻松阅读。有时人们会错过评论部分。 - To Ka

我已经弹出了webpack配置文件，我是否可以使用这些步骤？ - Jesus Gilberto Valenzuela