Angular 프레임워크는 기본적으로 Angular CLI를 사용하여 프로젝트를 생성하고 설정한다. 하지만 때때로 프로젝트의 특별한 요구 사항이나 세부적인 웹팩 설정을 해야 할 때가 있다. 이 글에서는 Angular 프로젝트에서 웹팩 설정을 어떻게 할 수 있는지 알아보겠다.

Angular CLI와 웹팩

Angular CLI는 Angular 프로젝트를 생성할 때 내부적으로 웹팩을 사용하여 빌드를 처리한다. 하지만 Angular CLI는 기본적으로 웹팩 설정을 완전히 숨기고 있어서, 웹팩 설정을 직접 수정하려면 추가적인 작업이 필요하다.

웹팩 설정 파일 커스터마이징

Angular CLI 프로젝트에서 웹팩 설정을 수정하려면 angular.json 파일에서 "builder" 부분을 "custom-webpack:browser"로 변경하고, 프로젝트 루트 폴더에 webpack.config.js 파일을 만들어야 한다.

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'API_URL': JSON.stringify('http://api.example.com')
      }
    })
  ]
};

위 예제에서는 웹팩의 DefinePlugin을 사용하여 애플리케이션 환경에 따라 다른 API 엔드포인트를 제공할 수 있도록 설정하였다.

웹팩 모듈 추가

Angular CLI 프로젝트에 웹팩 모듈을 추가하려면 angular.json 파일에서 "architect/build/options" 부분에 "extraWebpackConfig" 속성을 추가하고 웹팩 모듈의 경로를 지정해야 한다.

// angular.json
"architect": {
  "build": {
    "options": {
      "extraWebpackConfig": "webpack.config.js"
    }
  }
}

결론

Angular CLI를 기반으로 한 Angular 프로젝트에서 웹팩 설정을 커스터마이징하는 방법에 대해 알아보았다. 이를 통해 기본적으로 제공되는 빌드 도구 외에 추가적인 웹팩 설정을 통해 프로젝트를 더욱 세밀하게 제어할 수 있다.

참고 자료:

• https://webpack.js.org/
• https://angular.io/cli