Angular CLI Webpackの設定

1. Webpack モジュール
2. Angular CLI Webpack 構成を取得する手順

Angular CLI は、Angular プロジェクトを生成し、依存関係を追加し、開発および運用ビルドを実行できるコマンドライン インターフェイスです。 アイデアを本格的なアプリケーションに変換するために必要なすべてのツールを提供します。

Angular CLI は、プロジェクトの作成、テストの追加と実行、コンポーネント、サービス、パイプ、足場モジュール、機能などの生成のためのコマンドを提供します。また、webpack 構成ファイルも提供します。

Webpack モジュール

Webpack は、依存関係を持つモジュールを処理し、それらのモジュールを表す静的アセットを生成するモジュール バンドラーです。 Babel や TypeScript などの他のツールと組み合わせて使用すると、さまざまな種類の JavaScript 構文をサポートできます。

Webpack は、ソース ファイルを組み立てるためだけのものではありません。 また、多くのプラグインを処理できるため、さまざまな追加アクティビティを実行できます。 Webpack モジュール ローダーは、複数のファイル形式を解釈できます。

このモジュールを使用すると、Angular TypeScript ファイルで、たとえば import 行を使用して CSS ファイルをインポートできます。 多くの場合、Webpack は Angular コマンドライン ツールの背後に隠されています。

ただし、Angular アプリケーションの開発中に、webpack 設定の変更が必要になる場合があります。 Angular の古いバージョンでは、webpack の設定を削除して直接変更することができました。

ただし、基本構成へのアクセスは Angular 8 でブロックされています。それでも、新しいローダーまたは構成変数を追加して webpack 構成を拡張することができます。

Angular CLI には、変更ごとにアプリケーションをコンパイルし、新しい変更ごとにブラウザーに再ロードする開発サーバーも含まれています。 これにより、webpack を個別に構成することを心配することなく、アプリケーションを迅速に構築するための効果的なツールになります。

Angular CLI Webpack 構成を取得する手順

webpack で Angular CLI を使用するには、次の手順を実行する必要があります。

1. NodeJS と npm をシステムにインストールします。
2. 古いバージョンの Node.js を使用している場合は、4 以降をインストールし、Angular CLI をインストールする前に npm バージョンを 5 以降にアップグレードします。 この目的で 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 { }

ここ をクリックして、上記のコードのライブ デモを確認してください。