웹 개발을 할 때, 여러 개의 정적 파일들을 한 개의 번들 파일로 묶어서 사용하는 경우가 많습니다. 이렇게 번들링을 하면 네트워크 요청 횟수를 줄이고, 앱의 성능을 향상시킬 수 있습니다. Webpack은 이러한 번들링을 쉽게 처리할 수 있도록 도와주는 도구입니다.
Webpack 설치
먼저, Webpack을 사용하기 위해서는 Node.js가 설치되어 있어야 합니다. Node.js가 설치되어 있다면, 터미널에서 다음 명령어로 Webpack을 글로벌로 설치합니다.
npm install -g webpack
프로젝트 설정
Webpack을 사용하기 위해 프로젝트 디렉토리에서 다음과 같이 몇 가지 설정을 해야 합니다.
- 프로젝트 디렉토리에서
package.json파일을 생성합니다.
npm init -y
- Webpack을 개발 의존성으로 설치합니다.
npm install --save-dev webpack
Webpack 설정 파일 생성
Webpack 설정을 위한 파일인 webpack.config.js를 프로젝트 디렉토리에 생성합니다.
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
위의 설정 파일에서는 entry로 진입점을 설정하고, output으로 번들 파일의 이름과 경로를 설정합니다. 위의 예제에서는 src/index.js 파일을 진입점으로 하고, dist 폴더에 bundle.js라는 번들 파일을 생성하도록 설정했습니다.
번들링 실행
설정 파일을 작성한 후에는 터미널에서 다음 명령어로 번들링을 실행합니다.
webpack
번들링이 완료되면, dist 폴더에 번들 파일인 bundle.js가 생성됩니다.
웹 페이지에 번들 파일 추가
마지막으로, 웹 페이지에서 번들 파일을 추가하여 사용하면 됩니다. HTML 파일에 다음과 같이 추가해주세요.
<!DOCTYPE html>
<html>
<head>
<title>Webpack로 번들링한 페이지</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
이제 번들링된 JavaScript 파일이 웹 페이지에서 사용됩니다.
결론
Webpack은 정적 파일 번들링을 쉽게 처리할 수 있도록 도와주는 강력한 도구입니다. 위의 가이드를 따라서 설정 파일을 작성하고 번들링을 실행해보세요. 이렇게하면 확장 가능하고 효율적인 웹 애플리케이션을 개발할 수 있습니다.