[javascript] Webpack으로 자바스크립트 유틸리티 라이브러리 구축하기

29 Nov 2023

javascript

개요

Webpack은 모듈 번들러로, 자바스크립트 애플리케이션 개발 시 모듈을 묶고 번들로 만들어줍니다. 이번 포스트에서는 Webpack을 사용하여 자바스크립트 유틸리티 라이브러리를 구축하는 방법을 알아보겠습니다.

준비 사항

이 예제 코드를 실행하려면 다음과 같은 것들이 필요합니다:

Node.js: https://nodejs.org
Npm (Node Package Manager)

프로젝트 설정하기

먼저, 프로젝트 폴더를 생성하고 해당 폴더로 이동합니다.

mkdir js-utility-library
cd js-utility-library

프로젝트 폴더에 package.json 파일을 생성합니다.

npm init -y

그리고 Webpack과 Babel을 설치합니다.

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env --save-dev

이제 프로젝트 파일 구조를 설정합니다. 다음과 같이 폴더와 파일을 생성합니다.

js-utility-library
├── src
│   ├── index.js
│   ├── utils
│   │   └── math.js
└── dist
    └── bundle.js

디렉토리 구조가 준비되었으므로 코드를 작성해보겠습니다.

코드 작성하기

먼저 src/utils/math.js 파일에 다음과 같은 코드를 작성합니다.

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

다음으로 src/index.js 파일에 다음과 같은 코드를 작성합니다.

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

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

이제 Webpack 설정 파일(webpack.config.js)을 생성합니다.

const path = require('path');

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

프로젝트 빌드하기

모든 설정이 준비되었으므로 프로젝트를 빌드할 시간입니다. 다음 명령어를 실행하여 Webpack을 사용하여 프로젝트를 빌드합니다.

npx webpack

성공적으로 빌드되면 dist/bundle.js 파일이 생성됩니다.

결론

이제 여러분은 Webpack을 사용하여 자바스크립트 유틸리티 라이브러리를 구축하는 방법을 알게 되었습니다. Webpack을 이용하면 모듈 번들링을 손쉽게 처리할 수 있으며, Babel 등과 함께 사용하여 최신 자바스크립트 문법을 지원할 수 있습니다. 이를 통해 유지보수성 높은 자바스크립트 프로젝트를 만들 수 있습니다.

개요

준비 사항

프로젝트 설정하기

코드 작성하기

프로젝트 빌드하기

결론

참고 자료