웹팩 기초, 로더

개요

웹팩은 시작점을 통해 연결된 모든 의존적인 모듈을 하나의 파일로 합쳐주는 모듈 번들러이다.

번들러란 무엇일까? 부터 들어가기에는 로더에 대해 알아보려하기 때문에 넘어가도록 하자!

웹팩의 동작을 하나로 정리한 이미지.. 완벽하다!

참고로 시작점은 복수일 수도 있다.

 

로더

웹팩에서 로더는 번들링을 위한 파일의 변환을 도와주는 핵심적인 역할을 담당한다.

로더를 통해 자바스크립트 파일에서 CSS 파일을 import할 수 있고, TypeScript와 같은 다른 언어를 JavaScript로 변환할 수 있다.

 

로더의 사용 방법은 설정 파일과 인라인의 두 가지 방식이 있지만 공식 사이트에서는 설정 파일을 통한 사용을 권장한다.

 

그러므로 별도로 소개는 하지 않겠지만... 인라인 방식의 예시는 아래와 같다.

import Styles from 'style-loader!css-loader?modules!./styles.css';

 

 

다음은 설정 파일을 통한 사용이다.

웹팩은 설정 파일인 webpack.config.js 을 통해 옵션을 설정할 수 있으며, 로더는 최상단의 module 객체의 rules 배열에 등록하여 사용할 수 있다.

 

로더는 연결할 수 있으며, 연결된 로더는 역순으로 실행된다.

로더가 연결되어 있는 경우 이전 로더는 다음 로더에 결과를 전달하며, 최종 반환 값은 JavaScript 파일이 된다.

또한, test

 

아래의 코드를 통해 확인해보자.

  module: {
    rules: [
      { test: /\.scss$/, include: /src/, use: ["style-loader", "css-loader", "sass-loader"] },
      { test: /\.js$/, exclude: /node_modules/, use: "babel-loader" },
    ],
  },

 

 

 

 test - 정규식 또는 문자열을 통해 조건에 해당하는 파일을 찾는다.

 use - 조건에 해당하는 파일을 처리할 로더. 복수의 로더가 있는 경우 역순으로 실행된다.

 include - 검사를 포함할 경로이며, test와 함께 사용시 대상인 파일은 두 조건을 모두 일치해야 한다.

 exclude - 검사를 제외할 경로이며, test 및 include 보다 우선한다.

 

위의 설명을 통해 코드를 해석해보자.

 

먼저 첫 번째로 경로가 /src/ 이하이며, 확장자가 scss인 파일을 찾는다.

그리고, 조건에 해당하는 파일을 찾으면 use에 등록해둔 로더를 이용해서 처리한다.

이 때, 복수의 로더는 역순으로 실행되므로 sass-loader, css-loader, style-loader의 순서로 변환하게 된다.

 

두 번째로 경로가 /node_modules/ 이 아니면서 확장자가 js인 파일을 찾는다.

그리고, 조건에 해당하는 파일을 찾으면 use에 등록해둔 로더인 babel-loader를 이용해서 처리한다.

 

그렇다면 여기서 style-loader, css-loader, sass-loader, babel-loader는 어떤 역할을 담당할까?

사실 이름만 봐도 파악이 가능하긴 한데 본문이 너무 짧아져서 :)

 

1. style-loader

스타일 로더는 스타일 시트를 돔에 추가하기 위해 최종적인 변환을 담당하는 로더이다.

자바스크립트로 변경된 스타일을 동적으로 돔에 추가하며, css-loader와 함께 사용한다.

최종적으로 사용하는 로더인 만큼 use 배열의 맨 앞에 등록한다.

 

2. css-loader

css-loader는 css를 자바스크립트 코드로 변환한다.

// css
.currency__unit {
  cursor: no-drop;
  opacity: 0.5;
  background-color: $highlightA;
  color: #ddd;
}

// css-loader
'.currency__unit {\r\ncursor: no-drop;\r\nopacity: 0.5;\r\nbackground-color: $highlightA;\r\ncolor: #ddd;\r\n}'

 

3. sass-loader

sass-loader는 scss 파일을 css로 변환한다.

 

4. babel-loader

babel-loader는 바벨로의 변환을 지원하는 로더이다.

이 글은 로더에 대한 글이므로 바벨에 대한 설명은 공식 사이트의 설명을 참고하자.

 

로더에 대한 글인데 4개만 소개하면 아쉬울 거 같아서 자주 사용되는 로더를 하나 더 소개하려 한다.

 

5. file-loader

file-loader는 이름 그대로 파일을 출력 디렉토리로 내보낼 때 사용하는 loader이다.

대표적인 사용 예로는 CSS에서 이미지를 로드하는 경우가 있다.

 

아래의 코드를 통해 확인해보자.

module: {
  rules: [
    {
      test: /\.(png|jpg|jpeg|gif|svg)$/i,
      use: {
        loader: 'file-loader',
        options: {
          name: 'assets/[name].[ext]?[hash]',
        },
      },
    },
  ]
  output: {
    path: path.resolve(__dirname, 'dist'),
  }
}

 

 options - 옵션을 설정한다.

 options.name - 조건에 해당하는 파일이 저장될 경로(이름 포함)를 설정한다.

 output - 번들된 결과물이 저장되는 출력 디렉토리에 대한 정보를 담은 객체

 path - 파일이 저장될 경로를 의미한다.

 

위의 설명을 통해 코드를 해석해보자.

 

먼저 확장자가 png, jpg, jpeg, gif, svg 인 파일을 찾는다.

그리고, 조건에 해당하는 파일을 찾으면 그 파일을 출력 디렉토리로 지정된 dist 폴더에 저장한다.

이 때, options.name이 있으므로 파일은 최종적으로 프로젝트경로/dist/assets/[name].확장자?해시에 저장된다.

 

이 외에도 url-loader, raw-loader 등 다양한 로더가 존재한다!

---

참고 문서

 

웹팩 공식 사이트

웹팩의 file-loader와 url-loader