Angular CLI 웹팩 구성

1. 웹팩 모듈
2. Angular CLI Webpack 구성을 가져오는 단계

Angular CLI는 Angular 프로젝트를 생성하고, 종속성을 추가하고, 개발 및 프로덕션 빌드를 실행할 수 있는 명령줄 인터페이스입니다. 아이디어를 본격적인 응용 프로그램으로 변환하는 데 필요한 모든 도구를 제공합니다.

Angular CLI는 프로젝트 생성, 테스트 추가 및 실행, 구성 요소 생성, 서비스, 파이프, 스캐폴딩 모듈, 기능 등에 대한 명령을 제공합니다. 또한 웹팩 구성 파일도 제공합니다.

웹팩 모듈

Webpack은 종속성이 있는 모듈을 처리하고 해당 모듈을 나타내는 정적 자산을 생성하는 모듈 번들러입니다. Babel 또는 TypeScript와 같은 다른 도구와 함께 사용하여 다양한 유형의 JavaScript 구문을 지원할 수 있습니다.

Webpack은 단순히 소스 파일을 모으기 위한 것이 아닙니다. 또한 많은 플러그인의 처리 능력으로 인해 다양한 추가 활동을 실행할 수 있습니다. Webpack 모듈 로더는 여러 파일 형식을 해석할 수 있습니다.

예를 들어 이 모듈은 Angular TypeScript 파일을 사용하여 가져오기 라인을 활용하여 CSS 파일을 가져올 수 있습니다. Webpack은 종종 Angular 명령줄 도구 뒤에 숨겨져 있습니다.

그러나 Angular 애플리케이션을 개발하는 동안 webpack 설정을 수정해야 할 수 있습니다. 이전 Angular 버전에서는 웹팩 설정을 꺼내고 직접 변경할 수 있었습니다.

그러나 기본 구성에 대한 액세스는 Angular 8에서 차단되었습니다. 여전히 새 로더 또는 구성 변수를 추가하여 웹팩 구성을 확장할 수 있습니다.

Angular CLI에는 변경 사항이 있을 때마다 애플리케이션을 컴파일하고 새로운 변경 사항이 있을 때마다 브라우저에 다시 로드하는 개발 서버도 포함되어 있습니다. 따라서 webpack을 별도로 구성할 필요 없이 빠르게 애플리케이션을 구축할 수 있는 효과적인 도구입니다.

Angular CLI Webpack 구성을 가져오는 단계

웹팩과 함께 Angular CLI를 사용하려면 다음 단계를 수행해야 합니다.

1. 시스템에 NodeJS 및 npm을 설치합니다.
2. 이전 버전의 Node.js를 사용하는 경우 Angular CLI를 설치하기 전에 4 이상을 설치하고 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에 웹팩을 종속 항목으로 추가합니다.

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

위에서 언급한 코드의 라이브 데모를 확인하려면 여기를 클릭하십시오.