Angular CLI Webpack-Konfiguration

1. Das Webpack-Modul
2. Schritte zum Abrufen der Angular-CLI-Webpack-Konfiguration

Angular CLI ist eine Befehlszeilenschnittstelle, die Angular-Projekte generieren, Abhängigkeiten hinzufügen und Entwicklungs- und Produktions-Builds ausführen kann. Es bietet alle Werkzeuge, die erforderlich sind, um eine Idee in eine vollwertige Anwendung zu verwandeln.

Die Angular-CLI bietet Befehle zum Erstellen des Projekts, zum Hinzufügen und Ausführen von Tests, zum Generieren von Komponenten, Diensten, Pipes, Gerüstmodulen, Funktionen usw. Sie bietet auch eine Webpack-Konfigurationsdatei.

Das Webpack-Modul

Webpack ist ein Modul-Bundler, der Module mit Abhängigkeiten verarbeitet und statische Assets generiert, die diese Module darstellen. Wir können es in Verbindung mit anderen Tools wie Babel oder TypeScript verwenden, um verschiedene Arten von JavaScript-Syntax zu unterstützen.

Webpack dient nicht nur zum Zusammenstellen von Quelldateien; Aufgrund seiner Handhabungsfähigkeit vieler Plugins kann es auch verschiedene zusätzliche Aktivitäten ausführen. Webpack-Modullader können mehrere Dateiformate interpretieren.

Dieses Modul ermöglicht beispielsweise Angular-TypeScript-Dateien, die Import-Zeile zu nutzen, um CSS-Dateien zu importieren. Webpack verbirgt sich oft hinter dem Kommandozeilentool Angular.

Während der Entwicklung einer Angular-Anwendung kann es jedoch erforderlich sein, die Webpack-Einstellungen zu ändern. In älteren Angular-Versionen konnten Sie die Webpack-Einstellungen auswerfen und direkt ändern.

Aber der Zugriff auf die Basiskonfiguration wurde in Angular 8 blockiert. Dennoch können wir die Webpack-Konfiguration erweitern, indem wir neue Loader oder Konfigurationsvariablen hinzufügen.

Die Angular-CLI enthält auch einen Entwicklungsserver, der die Anwendung bei jeder Änderung kompiliert und bei jeder neuen Änderung neu in den Browser lädt. Dies macht es zu einem effektiven Tool zum schnellen Erstellen von Anwendungen, ohne sich Gedanken über die separate Konfiguration von Webpack machen zu müssen.

Schritte zum Abrufen der Angular-CLI-Webpack-Konfiguration

Die folgenden Schritte müssen ausgeführt werden, um die Angular-CLI mit Webpack zu verwenden:

1. Installieren Sie NodeJS und npm auf Ihrem System.
2. Wenn Sie eine ältere Version von Node.js verwenden, installieren Sie 4 oder höher und aktualisieren Sie Ihre npm-Version auf 5 oder höher, bevor Sie Angular CLI installieren. Sie können zu diesem Zweck auch nvm verwenden.
3. Installieren Sie Angular global mit npm install -g @angular/CLI.
4. Erstellen Sie ein Angular-Projekt mit ng new PROJECTNAME.
5. Fügen Sie die folgenden Skripte in package.json hinzu: "ng": "ng", "start": "ng serve", "build": "ng build".
6. Webpack als Abhängigkeit in package.json hinzufügen.

Beispiel (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
  ) {
  }
}

Beispiel (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 { }

Klicken Sie hier, um die Live-Demonstration des oben genannten Codes zu überprüfen.