Webpack 在 Angular 的 ng serve 中的作用 [英] Role of Webpack in Angular's ng serve

问题描述

我是 Angular 的新手，想知道当我们为应用程序提供服务时，Webpack 在幕后扮演什么角色.在最初的印象中，我开始知道 webpack 充当构建和打包工具，它将所有必需的 JS 文件分组到单独的包中.但是，我找不到 webpack 配置文件，也无法弄清楚 angular 和 webpack 是如何在图片中结合在一起的.

I am new to Angular and was wondering what role does Webpack play behind the scene when we ng serve the application. During initial impressions, I have come to know that webpack acts as a build and package tool that groups all the required JS files into separate bundles. I could not, however, find the webpack configuration file and could not figure how angular and webpack come together in the picture.

因此，当我提供 angular 4 应用程序时，这就是打印在终端上的内容.无法完全理解幕后发生的事情.

So when I serve the angular 4 app, this is what is printed on the terminal. Can't exactly understand what is happening behind the scenes.

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.

任何帮助将不胜感激.

推荐答案

Angular CLI 根据您传入的项目配置选项有效地将 Webpack 配置文件即时组合在一起.

Angular CLI effectively puts together a Webpack config file on the fly based on the project configuration options you pass in.

您可以找到生成此配置的主要代码段 此处，以及运行 ng serve 这里.

You can find the main piece of the code that generates this config here, and the code that passes it to Webpack when you run ng serve here.

这篇关于Webpack 在 Angular 的 ng serve 中的作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！