일반적인 웹 개발에서는 코드를 여러 개의 파일로 분할하여 작성하고, 이를 모듈화하는 것이 일반적입니다. 이렇게 모듈화된 코드는 관리가 쉽고 재사용성이 높아지며, 코드의 중복을 방지하는 등 여러 가지 이점을 가져다줍니다.
이때, Webpack은 모듈 번들러로서 많은 개발자들에게 사랑받고 있습니다. Webpack은 여러 개의 모듈을 하나의 번들로 묶어주고, 각 모듈 간의 의존성을 해결하여 웹 애플리케이션을 구성할 수 있게 해줍니다.
Webpack 설치 및 설정
Webpack을 사용하기 위해서는 먼저 Node.js와 npm이 설치되어 있어야 합니다. 설치가 완료되었다면 프로젝트 폴더로 이동하여 다음 명령을 실행하여 Webpack을 설치합니다:
npm install webpack webpack-cli --save-dev
설치가 완료되었다면, webpack.config.js 파일을 프로젝트 폴더에 생성하고 아래와 같은 설정을 추가합니다:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
위의 설정에서 entry는 진입점(entry point)으로서, 웹팩이 애플리케이션 번들링을 시작할 파일을 나타냅니다. 일반적으로 index.js와 같은 파일이 진입점이 됩니다. 그리고 output은 번들된 파일의 경로와 이름을 지정하는 부분입니다. 위의 설정에서는 dist 폴더에 bundle.js라는 이름으로 번들된 파일이 생성됩니다.
모듈화된 코드 작성하기
Webpack을 사용하여 모듈화된 코드를 작성하기 위해서는 여러 개의 파일로 코드를 분할해야 합니다. 예를 들어, src 폴더 안에 math.js와 index.js라는 파일을 생성합니다.
math.js 파일에는 다음과 같이 간단한 수학적인 함수를 구현합니다:
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
index.js 파일에는 다음과 같이 math.js 파일에서 내보낸 함수를 사용합니다:
import { add, subtract } from './math';
console.log(add(5, 3)); // Output: 8
console.log(subtract(10, 4)); // Output: 6
번들링 실행하기
이제 모듈화된 코드를 번들링하여 실행해보겠습니다. 터미널에서 다음 명령을 실행합니다:
npx webpack
위 명령을 실행하면 dist 폴더에 bundle.js 파일이 생성됩니다. 이제 HTML 파일에 번들링된 파일을 포함하면 됩니다. 다음과 같이 HTML 파일을 작성합니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack Example</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
브라우저에서 해당 HTML 파일을 실행하면 개발자 콘솔에서 다음과 같은 결과를 확인할 수 있습니다:
8
6
이처럼 Webpack을 사용하여 코드 베이스를 모듈화하면 개발 과정이 용이해지고, 번들링된 파일을 통해 모듈 간의 의존성을 해결할 수 있습니다.