[javascript] Webpack으로 소스 코드의 의존성 관리하기

29 Nov 2023

javascript

웹 개발을 할 때 여러 소스 파일 간에 의존성이 생깁니다. 이러한 의존성을 효과적으로 관리하기 위해 웹팩(Webpack)이라는 도구를 사용할 수 있습니다. 웹팩은 모듈 번들러로서, 소스 코드를 여러 모듈로 나누고 이 모듈들 간의 의존성을 파악하여 하나의 번들 파일로 만들어줍니다.

웹팩 설치하기

먼저 웹팩을 사용하기 위해서는 노드 패키지 매니저인 npm을 통해 웹팩을 설치해야 합니다. 아래 명령어를 터미널에서 실행하여 웹팩을 글로벌로 설치합니다.

npm install -g webpack

의존성 설정하기

웹팩을 사용하기 위해서는 프로젝트의 루트 디렉토리에 package.json 파일이 있어야 합니다. package.json 파일은 프로젝트의 정보와 의존성 패키지들을 관리하는 파일입니다.

웹팩의 의존성을 프로젝트에 추가하기 위해, package.json 파일의 devDependencies 항목에 웹팩 모듈을 추가합니다. 아래 코드는 package.json 파일의 예시입니다.

{
  "name": "my-webpack-project",
  "version": "1.0.0",
  "devDependencies": {
    "webpack": "^5.12.0"
  }
}

본인의 프로젝트에 맞게 의존성을 추가하고, 터미널에서 npm install 명령어를 실행하여 의존성을 설치합니다.

웹팩 설정 파일 작성하기

웹팩을 사용하기 위해서는 웹팩 설정 파일인 webpack.config.js 파일을 작성해야 합니다. 이 파일에 웹팩이 어떻게 동작해야 하는지에 대한 설정을 작성합니다.

아래는 간단한 webpack.config.js 파일의 예시입니다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

위 설정 파일은 src 디렉토리의 index.js 파일을 번들링하여 dist 디렉토리에 bundle.js 파일로 출력하는 설정입니다. 또한, 자바스크립트 파일을 바벨(Babel)을 사용하여 최신 문법을 하위 버전의 자바스크립트로 변환하는 설정도 포함하고 있습니다.

웹팩 실행하기

웹팩 설정 파일을 작성한 후에는 터미널에서 webpack 명령어를 실행하여 웹팩을 실행할 수 있습니다.

webpack --mode production

이 명령어는 웹팩을 프로덕션 모드로 실행하는 것을 의미합니다. --mode 옵션을 development, production, 또는 none 중 하나로 설정할 수 있습니다.

웹팩 실행 후에는 설정 파일에 정의된 내용에 따라 번들링된 파일이 출력 디렉토리에 생성됩니다.

결론

웹팩을 사용하면 소스 코드의 의존성을 효과적으로 관리할 수 있습니다. 의존성을 잘 정의하고 웹팩 설정 파일을 작성하여 소스 코드를 번들링함으로써 웹 애플리케이션의 성능을 향상시킬 수 있습니다.