웹팩이란? - 실습으로 자세히 알아보기

소요 시간: 3분 조회수: 145

현대 웹 개발에서는 다양한 자바스크립트 파일과 모듈을 효율적으로 관리하는 것이 매우 중요합니다. 이때, 웹팩(Webpack)은 이러한 파일들을 하나로 묶어주는 강력한 도구로 주목받고 있습니다. 웹팩은 모듈 번들러(module bundler)로, 여러 개의 자바스크립트 파일을 단일 번들로 결합하여 웹 애플리케이션의 성능을 최적화합니다. 이번 글에서는 웹팩이 무엇인지, 그리고 어떻게 사용하는지에 대해 간단한 예제를 통해 알아보겠습니다.


웹팩이란?

웹팩(Webpack)은 여러 자바스크립트 파일을 하나로 묶어주는 도구로, 이를 모듈 번들러(module bundler)라고 부릅니다. 번들은 여러 파일을 하나로 합친 결과물이며, 이 작업을 수행하는 프로그램이 바로 번들러입니다. 웹팩이 구체적으로 어떤 작업을 수행하는지 예제를 통해 알아보겠습니다.


예제: 간단한 BMI 계산 프로그램

다음 예제는 키와 몸무게를 입력받아 BMI(체질량지수)를 계산하는 간단한 프로그램입니다.

패키지 설치

먼저 작업할 폴더를 생성하고 해당 폴더로 이동합니다.

$ mkdir webpack-tutorial
$ cd webpack-tutorial

빈 npm 프로젝트를 생성합니다.

$ npm init -y

웹팩을 설치합니다.

$ npm install webpack webpack-cli --save-dev

파일 설정

두 개의 자바스크립트 파일을 생성합니다. 첫 번째 파일은 BMI를 계산하는 파일입니다.

// src/bmi.js
module.export.calculate = (weight, height) => weight / (height * height)

두 번째 파일은 키와 몸무게를 입력받아 결과를 출력하는 파일입니다.

// src/index.js
const bmi = require('./bmi');
console.log(bmi,calculate(75,1.75));

참고로, module과 require 키워드는 Node.js에서 모듈을 내보내거나 불러올 때 사용합니다. 이를 CommonJS 모듈 시스템이라 부릅니다.

번들링

웹팩으로 두 파일을 하나의 파일로 묶어보겠습니다. 아래 명령어를 입력해 웹팩을 실행합니다.

$ npx webpack --mode development --entry ./src/index.js -o output

output 폴더가 생성되고, 그 안에 main.js 파일이 있습니다. 이 파일을 실행하면 동일한 결과를 얻을 수 있습니다.

$ node ./output/main.js


설정 파일을 이용한 간소화

앞서 실행했던 웹팩 명령어에는 여러 옵션이 붙어 있습니다. 이를 매번 입력하지 않도록 설정 파일을 사용하겠습니다.

webpack.config.js 파일을 생성하고 아래 코드를 입력합니다.

const path=require('path');

module.export = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.join(__dirname, '.'),
    }
}

이제 웹팩 명령어만 실행하면 main.js가 생성됩니다.

$ npx webpack

이와 같이 웹팩을 사용하면 모듈 관리를 더욱 효율적으로 할 수 있으며, 코드의 유지 보수성과 재사용성을 높일 수 있습니다. 이러한 이유로 리액트는 웹팩을 사용하여 모듈을 관리합니다.

인기글

자바스크립트 리스트