[Webpack] Webpack 이란?

Wonny·2022년 12월 2일

Web

목록 보기

1/1

번들러

번들러를 왜 사용할까요?
웹 초창기에는 js, css, html 파일로만 이루어졌을정도로 웹사이트의 규모가 크지 않았습니다. 하지만 점차 기술이 발전하면서 웹을 구성하는 파일의 수도 증가하게 되면서 여러 문제들이 발생했습니다.

대표적인 문제점으로는 중복된 이름으로 인한 충돌과 파일 전송 속도 문제 등이 있었는데 이 문제들을 해결하기 위해서 여러개의 파일을 하나로 묶어주는 번들러가 나오게 되었습니다.

대표적으로 webpack, parcel , rollup 등이 존재하고 이 중에서는 webpack 이 주로 사용되고 있습니다.

Webpack

자바스크립트 어플리케이션의 Static Module Bundler로, 의존 관계에 있는 자바스크립트, css, 이미지등의 리소스들을 하나 또는 여러 개의 파일로 번들링하는 모듈 번들러입니다.

위 이미지처럼 서로 연관 있는 모듈 간의 관계를 해석하여 정적인 자원 (javascript)으로 변환시켜주는 도구라고 생각하면 됩니다.

어플리케이션 동작과 관련된 여러 개의 파일(HTML, css, js, Image 등)들을 1개의 js로 변환하고, 이 js파일만 브라우저에서 로딩하면 어플리케이션이 실행됩니다.

$ npm i -D webpack-cli webpack-dev-server

여기서

webpack 주요 속성

webpack.config.js 파일을 통해 webpack을 설정할 수 있습니다.
작업하려는 프로젝트의 가장 상위 폴더에 webpack.config.js 파일을 생성하면 됩니다.

entry

entry: './main.js',

이름 그대로 웹팩을 실행할 대상 파일의 진입점과 경로 정의를 정의합니다.
보통 웹 애플리케이션의 전반적인 구조와 내용이 들어있어 있는 메인 JS 파일을 지정합니다.

output

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js', // 기본값이므로 생략 가능
    clean: true,
  },

웹팩을 실행 후 최종 번들링된 결과 출력합니다.
빌드 결과물의 위치과 파일이름 등 설정이 가능합니다.

output.filename : 번들링된 파일의 이름을 명시해준다
output.path
번들링된 파일의 위치를 명시해줍니다. path: path.resolve(__dirname, 'dist') 은 기본값으로 생략이 가능합니다.
현재 파일 경로의 dist란 폴더를 만들어 달라는 뜻으로 생각하면 됩니다.

module

module: {
    // Loader
    rules: [
      {
        test: /\.s?css$/,
        use: ['style-loader', 'css-loader', 'sass-loader'], // use 배열은 뒤에서부터 적용
      },
    ],
  },

html, css, 이미지 파일 등을 js로 변환하기 위한 Loader 설정을 합니다.
즉 HTML, CSS, 이미지나, font 같은 asset 파일들을 웹팩이 인식하고 할 수 있도록 해주는 것을 loader가 맡아서 해주는데 이때 각 객체에는 최소 2개의 속성을 입력해야 합니다.

test: Loader를 적용할 파일 유형 (CSS, JS..)
use: Loader 이름
이때, 다수의 Loader를 적용해야 할 때는 use 배열은 뒤에서부터 적용합니다.
위의 코드를 예시로 들자면 sass-loader, css-loader, styles-loader 순으로 적용됩니다.

💡 css-loader 로 css 파일들을 읽은 뒤 style-loader를 통해 css파일들을 style 태그로 만들어 head 태그 안에 넣어주는 방식입니다.

plugin

웹팩 실행시 빌드 결과물에 대해 원하는 추가적인 기능을 추가 할 수 있는 옵션입니다.
결과물 사이즈 줄이기, 기타 css, html 파일로 분리 등이 가능합니다.

plugins: [
    // 자바스크립트와 관련없는 외부파일들
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
    new CopyWebpackPlugin({
      patterns: [{ from: 'static' }],
    }),
  ],

HtmlWebpackPlugin : webpack 번들을 제공하는 HTML 파일 생성을 단순화해줍니다. 이 플러그인은 매번 컴파일에 변경되는 해시로 된 파일 이름을 가진 webpack 번들에 특히 유용합니다. 플러그인이 HTML 파일을 생성하도록 하거나 lodash 템플릿을 사용하여 나만의 템플릿을 제공하거나 나만의 로더를 사용할 수 있습니다.
CopyWebpackPlugin : 이미 존재하는 개별 파일 또는 전체 디렉터리를 빌드 디렉터리에 복사해줍니다.

🌔 레퍼런스

Wonny

프론트엔드 개발자를 꿈꾸며