웹팩(Webpack)이란?

vue를 공부하던 도중, 컴포넌트 기반 개발을 하고 있었습니다.

컴포넌트가 늘어날수록 script도 같이 늘어나면서 코드가 너무 길어지는 문제가 발생했습니다.

이를 해결하기 위해, 어떤 방법이 있을지 찾아보던 도중, 웹팩(Webpack)에 대해 알게 되었어요!

 

1. 웹팩(Webpack)

웹팩(Webpack)은 JavaScript 애플리케이션을 위한 모듈 번들러(Module Bundler)입니다.

많은 수의 JavaScript 파일을 관리하고, 최종적으로 배포 가능한 형태로 묶어주는 도구입니다.

이를 사용하면, 여러 모듈과 자원을 하나 or 여러 파일로 번들링 할 수 있어요.

※ 번들링(Bundling) : 여러 개의 파일 or 모듈을 하나의 파일로 묶는 과정

 

2. 설치

그럼 일단, 설치를 해봅시다!

설치를 하기 전에, node.js가 설치되어 있어야 해요!

다음과 같이 입력하여, 설치해 줍니다. (npm 기준)

저는 개발할 경우에만 필요하기에 -D를 추가해 주었습니다.

npm i webpack webpack-cli -D

 

그러면 package.json에 다음과 같이 나타난 것을 확인할 수 있어요.

"devDependencies": {
    "webpack": "^5.92.1",
    "webpack-cli": "^5.1.4"
}

 

3. 기능

이제, 웹팩의 주요 기능에 대해 알아봅시다!

이는 webpack.config.js 파일에서 작업할 수 있어요.

 

1) Entry

애플리케이션의 시작 지점을 지정합니다.

시작 지점에서부터 의존성을 추적하여, 필요한 모든 모듈을 포함합니다.

module.exports = {
  entry: './src/index.js',
};

 

2) Loaders

JavaScript 파일 뿐만 아니라 CSS, 이미지 등 다양한 파일 유형을 처리할 수 있도록 도와줍니다.

각 파일 유형에 대해 적절한 변환을 수행합니다.

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    },
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: ['file-loader'],
    },
  ],
},

 

3) Plugins

번들된 파일을 최적화하거나 환경 변수를 주입하는 등 추가적인 기능을 수행할 때, 사용합니다.

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

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

 

4) Output

웹팩을 돌리고 난 결과물의 파일 경로를 지정합니다.

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

 

4. 정리하며

지금까지 Webpack에 대해 알아보았습니다.

Vue에서 이를 활용해, 여러 스크립트를 하나로 합쳐주는 역할을 주면 될 것 같아요!