웹팩이란? 웹팩 문법 알아보기

1. 웹팩이란?

웹팩은 모듈 번들러이다.

• 한마디로 여러 파일들을 하나의 js코드로 압축하고, 최적화 하는 라이브러리이다.

• 하나의 파일로 압축하기 때문에 네트워크 비용을 줄일 수 있다.

• 플러그인(plugin) 을 통해 번들링 결과물에 대한 후처리 작업을 수행할 수 있다.

• 로더(loader) 를 통해 js파일 이외에도 다양한 파일을 로드할 수 있다.

웹팩에서는 기본적으로 js로더를 탑재하고 있기 때문에 별도로 설정할 필요가 없다.
다만, 최신js문법을 구형js문법으로 바꾸고 싶다면 babel-loader를 추가해야 할 필요가 있다.

• 코드 스플리팅 기능을 이용해 초기 로딩 속도를 개선할 수 있다.

코드 스필리팅이란, 번들을 더 작은 청크(Chunk)로 분할하는 기술을 의미한다.
번들에서 사용자가 방문한 페이지만 로드하도록 코드를 분할해, 로드 속도를 향상시키는 것이다.

• 파일 변경마다 자동 번들링을 통해 개발자의 번거로운 작업을 줄여줄 수 있다.

2. 웹팩 문법

기본적으로 webpack.config.js 파일으로부터 웹팩이 읽을 설정파일을 내보낸다.

Node.js환경이기 때문에 CommonJS 문법을 사용해야한다.

2.1 기본적인 필수 요소

const path = require('path');

module.exports = {
  // 모드 설정: 'development', 'production', 'none' 중 선택
  mode: 'development',

  // 진입점(entry): 번들링 시작점 (주로 애플리케이션의 진입 파일)
  entry: './src/index.js',

  // 출력(output): 번들링 결과물에 대한 설정
  output: {
    path: path.resolve(__dirname, 'dist'), // 번들링된 파일이 저장될 경로
    filename: 'bundle.js', // 번들링된 파일의 이름
  },
};

mode

mode	설명	번들링된 파일 용량(상대적)
development	개발모드	높음
production	배포 모드	낮음
none	아무 기능이 없는 웹팩	낮음

entry

• entry는 웹팩이 처리할 파일의 시작 위치를 나타낸다.

• entry의 디폴트 설정값은 ./src/index.js 이며 원하는 경로를 설정할 수 있다.

• entry 지점으로 부터 import 되어 있는 다른 모듈과 라이브러리에 대한 의존성을 찾는다.

output

• output은 결과물

• filename은 결과물 이름

• path는 결과물이 저장될 폴더

이때 path는 __dirname을 이용해 절대 경로로 부여해야한다.

2.2 부가적인 기능

module

module을 통해 다양한 리소스들을 로드하고 처리하기위한 규칙을 정의할 수 있다.

다음은 최신js문법 사용을 위한 babel-loader를 추가하는 코드다.

  module: {
    rules: [
      {
        test: /\.js$/, // .js 확장자를 가진 자바스크립트 파일들에 대해서
        exclude: /node_modules/, // node_modules 폴더는 제외하고
        use: {
          loader: 'babel-loader', // babel-loader를 사용하여 자바스크립트 파일을 변환
        },
      },
    ],
  },

plugins

• 번들링 결과물에 대한 후처리 작업을 수행할 수 있다.

HtmlWebpackPlugin MiniCssExtractPlugin 등이 있다.

  plugins: [
    // 플러그인들을 여기에 추가
  ],