[Node.js] Webpack 기본 사용법

베하~!

BTC 블랙아웃입니다!!

 

Webpack은 현대적인 프론트엔드 프로젝트에서 모듈 번들링과 자원 관리를 위해 널리 사용되는 도구입니다.

Webpack을 사용하면 여러 개의 자바스크립트 파일, CSS, 이미지 등의 리소스를 하나의 번들로 묶어서 웹 애플리케이션의 성능을 향상시킬 수 있습니다.

이제 Webpack의 기본적인 사용법에 대해 알아보겠습니다.

 

---

들어가기에 앞서 제가 테스트에 사용했던 버전을 참고하시길 바랍니다.

💡 - Version Info - 💡
vue : v2 
vue/cli : v4.5.13 
node : v18.15.0 
npm : 9.5.0 
webpack : ^4.0.0 
webpack-cli : ^3.3.12 
css-loader : ^3.5.3 
style-loader : ^1.3.0 
terser-webpack-plugin : ^1.4.5 
mini-css-extract-plugin : ^0.9.0

---

설치

먼저, Webpack을 사용하기 위해서는 다음과 같이 Webpack을 설치합니다.

npm i webpack webpack-cli

• 본인에게 맞는 버전을 설치해주세요!

 

기본 설정 파일 (webpack.config.js)

Webpack을 사용하기 위해선 설정 파일을 작성해야 합니다. 일반적으로 webpack.config.js라는 이름의 파일을 프로젝트 루트 폴더 아래에 생성하여 설정을 관리합니다.

const path = require('path');

module.exports = {
  entry: './src/main.js', // 번들링의 시작점이 되는 파일 경로(vue.js)
  output: {
    path: path.resolve(__dirname, 'dist'), // 번들링된 결과물의 저장 경로
    filename: 'bundle.js', // 번들링된 결과물의 파일명
  },
  module: {
    rules: [
      {
        test: /\\.js$/, // 일치하는 파일을 로더에게 적용하는데, 여기서는 .js 확장자 파일에 적용
        exclude: /node_modules/, // 제외할 폴더
        use: 'babel-loader', // 해당 파일에 적용할 로더
      },
      // 다른 로더들 (CSS, 이미지 등) 추가 가능
    ],
  },
};

위의 설정 파일 예시에서는 ./src/main.js 파일을 시작점으로 설정하고, 번들된 결과물을 ./dist 폴더에 bundle.js라는 이름으로 저장하도록 설정하였습니다. 또한 JavaScript 파일에는 babel-loader를 적용하여 최신 자바스크립트 문법을 호환성 있는 버전으로 변환할 수 있도록 하였습니다.

 

로더 (Loaders)

Webpack은 모든 파일을 모듈로 다루며, 자바스크립트가 아닌 다른 유형의 파일(CSS, 이미지 등)을 자바스크립트 모듈로 변환할 수 있도록 로더를 사용합니다. 로더는 모듈에 대해 특정 변환 작업을 수행하고, module.rules 설정을 통해 적용됩니다.

예를 들어, CSS 파일을 번들링하기 위해서는 css-loader와 style-loader를 설치하고 설정 파일에 추가해야 합니다.

npm i css-loader style-loader

module.exports = {
  // ... 이전 설정 ...
  module: {
    rules: [
      {
        test: /\\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\\.css$/, // .css 확장자 파일에 적용
        use: ['style-loader', 'css-loader'], // 오른쪽에서 왼쪽 순서로 로더가 적용됨
      },
      // 다른 로더들 (이미지 등) 추가 가능
    ],
  },
};

위의 설정 예시에서는 .css 확장자를 가진 파일들에 대해 style-loader와 css-loader를 적용하여 CSS 파일을 자바스크립트로 변환하고 스타일을 <style> 태그로 만들어주도록 설정했습니다.

 

플러그인 (Plugins)

로더가 파일을 해석하는데 반해, 플러그인은 번들된 결과물에 추가적인 처리를 하거나 최적화를 수행하는 등의 작업을 수행합니다. Webpack에서는 다양한 플러그인들을 제공하며, 필요에 따라 플러그인을 추가하고 설정할 수 있습니다.

예를 들어, 번들된 결과물에서 중복되는 코드를 제거하는 TerserPlugin과 번들된 CSS 파일을 별도의 파일로 분리하는 MiniCssExtractPlugin 플러그인을 사용해보겠습니다.

npm i terser-webpack-plugin mini-css-extract-plugin

 

설치 후 webpack.config.js에 플러그인을 추가합니다.

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css', // 분리된 CSS 파일명
    }),
    new TerserPlugin(), // 코드 최적화를 위한 플러그인
  ],
};

위의 설정 예시에서 MiniCssExtractPlugin은 번들된 CSS를 별도의 파일로 분리하여 styles.css로 저장하도록 설정하였습니다. 또한 TerserPlugin은 번들된 자바스크립트 코드를 압축하여 최적화하는 플러그인입니다.

 

번들링

Webpack의 설정이 모두 완료되었다면, 번들링을 실행하여 애플리케이션을 빌드할 수 있습니다. package.json 파일에 스크립트를 추가하고 npm run build 명령으로 빌드합니다.

"scripts": {
  "build": "webpack --config webpack.config.js"
}

저는 vue-cli를 사용했기 때문에 기존의 값인 vue-cli-service를 그대로 사용했습니다.

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

Webpack은 설정 파일을 기반으로 애플리케이션을 번들링하고, 설정에 따라 dist 폴더에 bundle.js와 styles.css를 생성합니다.

- 생성된 css파일 예시

 

---

결론

Webpack은 현대적인 프론트엔드 개발에서 필수적인 도구로, 모듈 번들링과 리소스 관리를 쉽게 수행할 수 있도록 도와줍니다.

위에서는 Webpack의 기본적인 사용법과 로더, 플러그인에 대해 간단히 소개하였습니다. 더 많은 로더와 플러그인들이 있으니, 필요에 따라 공식 문서 등을 참고하여 웹 애플리케이션을 더욱 효율적으로 개발할 수 있기를 바랍니다.

 

Webpack을 잘 활용하면 개발 생산성과 애플리케이션의 성능을 향상시킬 수 있습니다. 지속적인 학습과 실험을 통해 Webpack을 마스터하시기를 응원합니다.

 

이상으로 Webpack 기본 사용법에 대한 가이드를 마치겠습니다.

감사합니다!