迹忆客 专注技术分享

Angular CLI 是一个命令行界面，可以生成 Angular 项目、添加依赖项以及运行开发和生产构建。 它提供了将想法转化为成熟应用程序所需的所有工具。

Angular CLI 提供了用于创建项目、添加和运行测试、生成组件、服务、管道、脚手架模块、功能等的命令。它还提供了一个 webpack 配置文件。

Webpack 模块

Webpack 是一个模块打包器，它处理具有依赖关系的模块并生成代表这些模块的静态资产。 我们可以将它与其他工具（如 Babel 或 TypeScript）结合使用，以支持不同类型的 JavaScript 语法。

Webpack 不仅仅用于组装源文件； 由于它对许多插件的处理能力，它还可以执行各种额外的活动。 Webpack 模块加载器可以解释多种文件格式。

例如，此模块使 Angular TypeScript 文件能够利用导入行导入 CSS 文件。 Webpack 通常隐藏在 Angular 命令行工具的后面。

但是，在开发 Angular 应用程序时，可能需要修改 webpack 设置。 较旧的 Angular 版本允许您弹出 webpack 设置并直接更改它们。

但是在 Angular 8 中已经阻止了对基本配置的访问。不过，我们可以通过添加新的加载器或配置变量来扩展 webpack 配置。

Angular CLI 还包括一个开发服务器，它在每次更改时编译应用程序，并在每次新更改时将其重新加载到浏览器中。 这使它成为快速构建应用程序的有效工具，而无需担心单独配置 webpack。

获取 Angular CLI Webpack 配置的步骤

必须完成以下步骤才能将 Angular CLI 与 webpack 一起使用：

1. 在您的系统上安装 NodeJS 和 npm。
2. 如果您使用的是旧版本的 Node.js，请安装 4 或更高版本并将 npm 版本升级到 5 或更高版本，然后再安装 Angular CLI。 您也可以为此目的使用 nvm。
3. 使用 npm install -g @angular/CLI 全局安装 Angular。
4. 使用 ng new PROJECTNAME 创建一个 Angular 项目。
5. 在 package.json 中添加以下脚本：“ng”：“ng”，“start”：“ng serve”，“build”：“ng build”。
6. 在 package.json 中添加 webpack 作为依赖。

示例 (App.component.ts):

import { Component, Inject } from "@angular/core";
import { APP_VERSION } from '../webpack/app-version';
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(
    @Inject(APP_VERSION) public appVersion: string
  ) {
  }
}

示例 (App.module.ts):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { APP_VERSION } from '../webpack/app-version';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [{
    provide: APP_VERSION,
    useValue: '12345678'// AppVersion
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }