[javascript] Webpack으로 대규모 프로젝트 관리하기

29 Nov 2023

javascript

이 글에서는 대규모 프로젝트를 관리하기 위해 Webpack을 사용하는 방법에 대해 알아보겠습니다. Webpack은 모듈 번들러로서, 여러 개의 자바스크립트 파일과 리소스들을 하나의 번들로 묶어줌으로써 프로젝트의 성능을 최적화하고 개발자들의 작업 효율을 높여줍니다.

Webpack 설치 및 설정

먼저, Node.js가 설치되어 있는지 확인해야 합니다. Node.js가 설치되어 있지 않다면, 공식 웹사이트에서 다운로드하여 설치할 수 있습니다.

프로젝트 폴더에서 다음 명령어를 사용하여 Webpack을 설치합니다.

npm install webpack webpack-cli --save-dev

webpack.config.js 파일을 프로젝트 폴더에 생성합니다. 이 파일은 Webpack의 설정을 담당하는 파일입니다.
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 파일을 생성하여 프로젝트의 진입점으로 설정합니다.
package.json 파일에 다음 스크립트를 추가합니다.

"scripts": {
  "build": "webpack"
}

모듈 사용과 번들링

Webpack은 ES6 모듈 문법을 지원하며, 여러 모듈을 불러와 번들로 묶을 수 있습니다.

import { sum } from './math';

console.log(sum(2, 3));

위의 예제에서 math.js 파일에서 sum 함수를 불러와 사용하고 있습니다.

로더 사용하기

Webpack은 다양한 로더를 통해 다양한 유형의 파일들도 모듈로 취급할 수 있습니다. 예를 들어, CSS나 이미지 파일들을 로더를 통해 처리할 수 있습니다.

CSS 로더 설치하기:

npm install style-loader css-loader --save-dev

webpack.config.js 파일에 다음과 같이 로더 설정을 추가합니다.

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    },
  ],
}

CSS 파일을 불러와 사용하면 됩니다.

import './styles.css';

플러그인 사용하기

Webpack의 플러그인은 번들된 결과물에 대한 다양한 추가 작업을 수행할 수 있게 해줍니다.

HTML 플러그인 설치하기:

npm install html-webpack-plugin --save-dev

webpack.config.js 파일에 HTML 플러그인 설정을 추가합니다.

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

src 폴더에 index.html 파일을 생성하여 웹 애플리케이션의 기본 HTML 템플릿을 작성합니다.
index.js 파일에서 다음과 같이 HTML을 불러와서 사용할 수 있습니다.

import htmlTemplate from './index.html';

범용적인 환경 구성

Webpack의 설정 파일은 개발 환경과 프로덕션 환경에서 서로 다른 설정을 적용할 수 있습니다.

.env 파일을 프로젝트 폴더에 생성합니다.
.env 파일에 다음과 같이 환경 변수를 설정합니다.

MODE=development

webpack.config.js 파일을 업데이트하여 개발과 프로덕션 환경에서 다른 설정을 사용하도록 합니다.

const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = (env) => {
  const envFile = env.MODE === 'production' ? '.env.prod' : '.env.dev';
  const envVars = dotenv.config({ path: envFile }).parsed;

  return {
    // ...
    plugins: [
      new webpack.DefinePlugin({
        'process.env': JSON.stringify(envVars),
      }),
    ],
  };
};

이제 .env.dev 파일과 .env.prod 파일을 각각 개발 환경과 프로덕션 환경에 맞게 작성하면, 각각의 환경 변수를 사용할 수 있습니다.

결론

Webpack을 사용하면 대규모 프로젝트의 모듈 관리와 번들링을 쉽게 할 수 있습니다. 이 글에서는 Webpack의 설치 및 설정, 모듈 사용, 로더 사용, 플러그인 사용, 범용적인 환경 구성에 대해 알아보았습니다. Webpack을 적절히 활용하여 프로젝트의 성능과 개발 효율을 향상시킬 수 있습니다.

Webpack 설치 및 설정

모듈 사용과 번들링

로더 사용하기

플러그인 사용하기

범용적인 환경 구성

결론

참고 자료