[javascript] Webpack과 Angular 함께 사용하기

29 Nov 2023

javascript

Angular는 강력한 프론트엔드 프레임워크로 애플리케이션 개발을 간편하게 만들어줍니다. Angular를 사용하기 위해서는 일반적으로 모듈 번들러인 Webpack과 함께 사용됩니다. Webpack은 Angular 애플리케이션의 자바스크립트, CSS, HTML 등의 리소스들을 효율적으로 관리하고 번들링하는 도구입니다. 본 글에서는 Webpack과 Angular를 함께 사용하는 방법에 대해 알아보겠습니다.

Webpack 설치

Webpack을 사용하기 위해 먼저 Node.js와 npm이 설치되어 있어야 합니다. Node.js와 npm을 설치한 후에는 프로젝트 폴더에서 다음 명령어를 실행하여 Webpack을 전역으로 설치합니다.

npm install -g webpack

Angular 프로젝트 생성

Angular 프로젝트를 생성하기 위해 Angular CLI(Command Line Interface)를 사용합니다. 다음 명령어를 실행하여 Angular CLI를 전역으로 설치합니다.

npm install -g @angular/cli

Angular CLI 설치가 완료되었다면, 프로젝트 폴더로 이동하여 다음 명령어를 실행하여 새로운 Angular 프로젝트를 생성합니다.

ng new my-app

Webpack 설정

Webpack을 사용하기 위해 프로젝트 폴더에서 webpack.config.js 파일을 생성합니다. 다음은 간단한 Webpack 설정 예제입니다.

const path = require('path');

module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  }
};

위 설정에서는 entry로 Angular 애플리케이션의 진입점인 main.ts를 지정하고, output으로 번들된 파일의 경로와 이름을 설정합니다. module.rules에서는 TypeScript 파일을 ts-loader로 컴파일하도록 설정합니다. 또한, resolve.extensions에는 확장자명을 지정하여 import 구문에서 확장자를 생략할 수 있도록 합니다.

Angular와 Webpack 연결

Angular 프로젝트와 Webpack을 연결하기 위해서는 Angular 애플리케이션의 메인 모듈 파일인 main.ts를 수정해야 합니다. main.ts 파일에는 다음과 같이 Webpack이 로드할 수 있도록 필요한 부분을 추가합니다.

import './polyfills';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

위 코드에서는 Webpack으로 로드할 수 있도록 polyfills.ts 파일을 먼저 import 하고, Angular의 메인 모듈인 AppModule을 Webpack으로 로드하여 애플리케이션을 실행합니다.

빌드 및 실행

Webpack 설정이 완료되었으면, 다음 명령어를 실행하여 Angular 애플리케이션을 빌드합니다.

webpack

빌드가 성공하면, dist 폴더에 번들된 파일인 bundle.js가 생성됩니다. 이제 다음 명령어를 실행하여 Angular 애플리케이션을 실행합니다.

ng serve

웹 브라우저에서 http://localhost:4200으로 접속하면, Angular 애플리케이션이 정상적으로 실행됩니다.

마무리

이제 Webpack과 Angular를 함께 사용하기 위한 기본적인 설정 방법에 대해 알아보았습니다. 이를 통해 Angular 애플리케이션을 효율적으로 개발하고 번들링할 수 있습니다. 더 다양한 Webpack 설정을 적용하여 Angular 애플리케이션을 최적화할 수도 있으니, 공식 문서 및 추가 참고 자료를 참고하여 개발환경을 구성해보세요.