Webpack在Angular的ng serve中的作用

Question

我刚接触Angular，想知道在我们使用ng serve运行应用程序时，Webpack在幕后起到什么作用。初步了解后，我知道webpack是一个构建和打包工具，可以将所有需要的JS文件分组成单独的捆绑包。然而，我找不到webpack配置文件，并且无法确定angular和webpack如何结合在一起。

因此，当我服务于angular 4应用程序时，终端上会打印出以下内容。我无法确切地理解幕后发生了什么。

webpack: Compiling...
Date: 2017-12-05T07:13:25.436Z
Hash: a6d360a858a29480ebbc
Time: 310ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry]
chunk {main} main.bundle.js, main.bundle.js.map (main) 35.4 kB {vendor} [initial] [rendered]
kB {vendor} [initial] [rendered]                            ap (polyfills) 200 kB {inline} [initial]chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 200 kB {inline} [initial]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 195 kB {inline} [initial]chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.65 MB [initial]
webpack: Compiled successfully.

非常感谢您的帮助。

- Salman Kazmi

Answer 1

Angular CLI 会根据您传递的项目配置选项，实时组合一个 Webpack 配置文件。您可以在这里找到生成该配置文件的主要代码，以及在运行ng serve时将其传递给 Webpack 的代码。

- Joe Clay

---

你能否详细解释一下Webpack是如何创建这些包的过程，这样就可以清楚地了解了。如果可能的话，请提供任何有关Angular上下文中详细解释的链接。谢谢。 - Salman Kazmi

@SalmanKazmi：其实没有太多需要详细说明的——我提供的代码生成了一个标准的Webpack配置（如此处所述），从那一点开始，构建过程与任何其他Webpack构建过程基本相同。 - Joe Clay

请问你能否更新GitHub链接吗？这些链接已经失效了。 - coder87

Answer 2

基本上你是完全正确的！

也许你想看看官方文档中关于webpack的文章？https://angular.io/guide/webpack

顺便说一下：自2016年末以来，webpack已经被广泛使用，并且与Broccoli＆SystemJS相比具有一些优点，例如AoT和更快的构建时间。

- x2twelve

---

我阅读了你提到的链接所提供的详细解释。虽然信息很有用，但仍针对一般性地解释Webpack。我正在寻找一个能详尽解释事情的资源。还是谢谢。 - Salman Kazmi

不客气，我也是新手，刚刚找到了这个链接，想让你看看 ;) - x2twelve