ng build 和 webpack 有什么区别

Question

据我了解，ng-build 会为您的应用程序创建一个可分发的打包版本。我也了解到webpack 是用来捆绑 Javascript 模块的。

我在一个测试项目上运行 ng build 并发现它创建了一个 dist 文件夹，其中包含看起来像是我的 Angular 应用程序的打包版本。所有.js 文件都已合并，但我引用的.css 文件仍保留为原始形式（未捆绑或缩小）。

因此，使用ng build 或webpack 来完成这项工作有什么区别。还是它们是免费的？我可能会在我的部署管道中同时使用这两种方法吗？

Answer 1

不是一个完整的答案，但值得注意：

如果您的 css 文件未编译，则可能意味着：

1. 你跑了ng build（又名ng build --dev），它将default --extract-css添加到false：

--extract-css（别名：-ec）

从全局样式中提取 css 到 css 文件而不是 js 文件中。

1. 您运行了ng build --prod，但忘记在 angular.cli.json 中将您的样式引用为全局样式：

   "styles": [ "styles.css", "assets/styles/test.component.css" ],

一旦你这样做了，你会发现你的 css 文件是内联的，但是，你也会发现它们是正常格式的。不明白为什么会这样..

Answer 2

Webpack 和 ng-build 做几乎相同的工作，即捆绑您的模块以在浏览器环境中使用。例如，Angular 模块是一个功能，在浏览器中不支持，而 ES 6 模块还没有在任何浏览器中实现，这就是为什么需要 bundled.ng 构建仅用于 Angular。我们可以为您打包任何与 UI 相关的应用程序，包括 Angular。