[javascript] Webpack으로 프로젝트 구조 설정하기

29 Nov 2023

javascript

개요

Webpack은 JavaScript 애플리케이션을 위한 모듈 번들러로, 프로젝트 구조를 관리하고 모듈 간의 의존성을 해결할 수 있습니다. 이 글에서는 Webpack을 사용하여 프로젝트의 구조를 설정하는 방법에 대해 알아보겠습니다.

설치 및 설정

Node.js가 설치되어 있는지 확인하세요. Node.js가 설치되어 있지 않은 경우, 공식 웹사이트에서 설치할 수 있습니다.
프로젝트 디렉토리에서 다음 명령어를 사용하여 Webpack과 관련된 패키지를 설치하세요:
```
npm install webpack webpack-cli --save-dev
```
프로젝트의 루트 디렉토리에 webpack.config.js 파일을 생성하세요. 이 파일은 Webpack의 설정을 담당하는 파일입니다.
webpack.config.js 파일에 다음 내용을 추가하세요:
```
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
```
위의 예제 설정에서 entry는 Webpack이 번들링을 시작할 진입점 파일이고, output은 번들링된 결과 파일의 경로와 파일명을 설정합니다.
프로젝트 디렉토리에서 다음 명령어를 실행하여 Webpack을 빌드하세요:
```
npx webpack
```
이 명령어를 실행하면 Webpack은 entry 설정을 기반으로 모든 의존성을 해결하고 output 설정에 따라 번들 파일을 생성합니다.

추가 설정

Webpack을 사용하여 프로젝트 구조를 설정하는 데는 여러 가지 방법이 있습니다. 다음은 몇 가지 유용한 추가 설정입니다:

로더: Webpack은 JavaScript 파일뿐만 아니라 CSS, 이미지, 폰트 등 다양한 유형의 파일도 처리할 수 있습니다. 로더를 사용하여 Webpack이 다른 유형의 파일을 번들링할 수 있도록 설정할 수 있습니다.
플러그인: 로더는 파일을 변환하고 로드하지만 플러그인은 번들 파일을 최적화하거나 추가적인 작업을 수행하는 데 사용됩니다. 예를 들어, UglifyJS 플러그인은 번들 파일을 압축하여 파일 크기를 줄일 수 있습니다.
개발 서버: Webpack Dev Server를 사용하면 프로젝트를 빌드하지 않고도 개발 중인 애플리케이션을 미리 확인할 수 있습니다. 개발 서버를 설정하여 변경 사항을 자동으로 감지하고 웹 애플리케이션을 실시간으로 새로고침할 수 있습니다.

결론

Webpack을 사용하여 프로젝트 구조를 설정하면 모듈 간의 의존성 문제를 쉽게 해결할 수 있고, 번들링 과정을 간단하게 관리할 수 있습니다. 이 글에서는 Webpack의 기본 설정 방법을 살펴보았으며, 추가적인 설정 및 기능에 대해서는 공식 문서를 참고하는 것을 추천합니다.

참고 자료: