[javascript] Webpack으로 프로젝트 구조 설정하기
개요
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의 기본 설정 방법을 살펴보았으며, 추가적인 설정 및 기능에 대해서는 공식 문서를 참고하는 것을 추천합니다.
참고 자료: