코드 베이스의 모듈화는 애플리케이션의 유지 보수성을 향상시키고 코드 재사용성을 높이는 데에 중요한 역할을 합니다. 이를 위해 많은 개발자들이 Webpack을 사용하여 자바스크립트 프로젝트를 모듈화하고 번들링합니다.

Webpack이란?

Webpack은 자바스크립트 애플리케이션을 위한 모듈 번들러입니다. 웹 애플리케이션에서 필요한 여러 파일을 하나로 묶어주고, 의존성 관리와 코드 최적화를 도와줍니다. 이를 통해 개발자는 모듈 단위로 코드를 작성하고, 필요한 모듈을 필요한 곳에서 가져와 사용할 수 있습니다.

Webpack 설정하기

Webpack을 사용하기 위해서는 먼저 프로젝트에 Webpack을 설치해야 합니다. 아래의 명령을 사용하여 프로젝트에 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',
  },
};

위의 설정은 src/index.js 파일을 진입점으로 하여 모든 의존성을 생성된 dist/bundle.js 파일로 번들링하는 것을 의미합니다.

모듈화된 코드 작성하기

Webpack을 사용하여 코드를 모듈화하기 위해서는 ES6의 import/export 문법을 사용해야 합니다. 아래는 예시로 사용되는 두 개의 모듈입니다.

src/math.js

export const add = (a, b) => {
  return a + b;
}

export const subtract = (a, b) => {
  return a - b;
}

src/index.js

import { add, subtract } from './math';

console.log(add(5, 3)); // Output: 8
console.log(subtract(10, 2)); // Output: 8

Webpack 빌드하기

Webpack의 기본 설정을 작성하고 모듈을 작성한 다음에는 프로젝트를 빌드해야 합니다. 이는 아래의 명령으로 실행할 수 있습니다.

npx webpack

빌드가 성공적으로 완료되면, dist/bundle.js 파일이 생성되고 모듈화된 코드가 포함되어 있을 것입니다.

결론

Webpack을 사용하여 코드 베이스를 모듈화하면 프로젝트의 구조를 더욱 체계적으로 관리할 수 있으며, 코드 재사용성을 향상시켜 개발 생산성을 높일 수 있습니다. Webpack의 강력한 기능과 설정 옵션을 활용하여 프로젝트에 최적화된 모듈 번들링 설정을 구성해보세요.

참고 자료:

• Webpack 공식 문서
• Webpack 개발 서버 설정하기