[javascript] Webpack으로 기존 프로젝트에 적용하기

29 Nov 2023

javascript

현대의 웹 개발에서는 대부분의 프로젝트가 여러 개의 파일로 구성되어있습니다. 특히 JavaScript 프로젝트에서는 여러 개의 모듈로 이루어진 코드가 주를 이루고 있습니다. 이러한 파일들을 효율적으로 관리하고 번들링하기 위해 Webpack을 사용하는 것이 좋은 선택입니다.

Webpack이란?

Webpack은 모듈 번들러로, 여러 개의 파일을 하나의 번들 파일로 묶어주는 역할을 합니다. 이렇게 묶인 번들 파일은 브라우저에서 실행될 수 있습니다. 또한, CSS, 이미지 등 다양한 파일도 모듈로서 포함시킬 수 있어서 웹 애플리케이션의 전체적인 구조를 관리하기에 매우 유용합니다.

기존 프로젝트에 Webpack 적용하기

이제 기존의 프로젝트에 Webpack을 적용해보겠습니다. Webpack을 적용하기 위해서는 몇 가지 단계를 따라야 합니다.

1. Webpack 설치

먼저 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하여 Webpack을 설치합니다.

npm install webpack webpack-cli --save-dev

2. Webpack 설정 파일 생성

프로젝트의 루트 디렉토리에 webpack.config.js라는 이름의 파일을 생성합니다. 이 파일은 Webpack의 설정을 담당하는 파일이며, 다음과 같은 내용으로 작성합니다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

위의 예시에서 entry는 프로젝트에서 메인으로 사용될 JavaScript 파일 경로를 나타내고, output은 번들링된 파일의 이름과 경로를 설정합니다. 이 예시에서는 src 폴더의 index.js 파일을 메인으로 사용하고, 번들링된 파일은 dist 폴더에 bundle.js라는 이름으로 생성됩니다.

3. Webpack 빌드

이제 다음 명령어를 실행하여 Webpack을 실행하여 프로젝트를 빌드합니다.

npx webpack

Webpack은 entry로 설정한 JavaScript 파일을 기준으로 의존하는 파일들을 찾아 번들링하고, output에서 설정한 경로에 번들링된 파일을 생성합니다. 성공적으로 빌드되면 프로젝트 디렉토리에 dist 폴더와 그 안에 bundle.js 파일이 생성됩니다.

4. HTML 파일에 번들 파일 포함하기

마지막으로, HTML 파일에 Webpack으로 생성된 번들 파일을 포함시켜야 합니다. HTML 파일에서 번들 파일을 포함하기 위해 <script> 태그를 사용하는데, src 속성에 번들 파일의 경로를 지정하면 됩니다. 예시를 보겠습니다.

<!DOCTYPE html>
<html>
<head>
  <title>Webpack Example</title>
</head>
<body>
  <script src="dist/bundle.js"></script>
</body>
</html>

이제 웹 페이지를 열어보면 Webpack으로 번들링한 JavaScript 파일이 실행되는 것을 확인할 수 있습니다.

결론

기존의 프로젝트에 Webpack을 적용하여 파일들을 효율적으로 관리하고 번들링할 수 있습니다. 이를 통해 웹 애플리케이션의 구조를 개선하고 개발 과정을 원활하게 할 수 있습니다. Webpack을 사용하여 웹 개발에서 생산성을 높여보세요!