Loader란? 🧐

정의 📋

모듈을 입력받아 처리하는 과정과 관련된 속성

역할 💪

• 웹팩이 의존성 그래프를 완성시키는 과정에서 의존 관계를 갖는 다양한 타입의 모듈들을 입력받고 처리하는 역할

특징 👋

• 모듈을 해석할 때 js파일이나 json파일을 기본 모듈로 봄
• 만약 다른 파일을 모듈로 불러와서 사용하게 될 경우, loader라는 요소를 설정해야 그 파일들을 모듈로 불러와서 번들링 가능

문법 🔏

• test 라는 key를 통해 모듈을 인식하는 패턴을 지정
• use라는 key를 통해 사용할 loader와 option을 설정해서 모듈을 처리할 때 어떻게 처리할 지 구체적으로 정할 수 있음

체이닝 ⛓

• loader를 읽어들이는 순서

Webpack Loader 🛠

CSS Loader ⚙️

정의

• CSS를 모듈로 사용하기 위해 사용되는 로더

기존 CSS의 문제점

• CSS는 선택자의 이름이 전역 환경으로 적용
  → 어플리케이션 규모가 커질수록 선택자 이름에 충돌이 없도록 신경을 써주어야 함

장점

• CSS 파일별 class이름 중복 우려 감소
  → CSS파일을 모듈로 불러오고 class이름들을 javascript 파일에 직접 불러와서 사용 가능

Sass-loader

Sass

정의

• css의 확장된 형태

특징

• sass가 적용된 결과물은 완성된 css 파일을 제공
• 다양한 문법 제공
• css를 표현할 때 가독성이 높은 표현법을 사용

장점

• 중복된 코드 제거 가능
• 명확하게 css를 설계 가능

동작

1. sass-loader 작동
   (sass module을 읽고 해석하고 css 파일로 컴파일)
2. sass-loader 결과물을 받고 css-loader 작동
   ( 컴파일된 css 파일이 css-loader를 통해 build 결과물에 같이 합쳐져서 완성 )

Style Loader ⚙️

역할

• 처리하는 CSS 파일별로 Style 태그를 생성
  → CSS Loader를 통해 가져온 CSS 내용을 style 태그를 생성해서 head 태그 안에 주입

File Loader ⚙️

정의

• 모듈 내에서 import 또는 require 키워드를 통해 사용하고자 하는 파일들을 모듈로 읽어 들일 수 있게 해주는 로더

역할

• 파일 로더로 읽어 들인 파일의 경우, 빌드가 될 때 output 디렉토리 경로로 파일을 카피

URL Loader ⚙️

역할

• 작은 이미지와 같은 리소스(인라인 형태로 적용되는 리소스)들을 문자열 형태로 변환

장점

• 리소스 요청 수 감소
  → 파일 크기가 크거나 중요한 파일들은 상대적으로 더 빨리 불러옴
• 문서를 다운받는 시간에 영향을 주지 않음
  → 이미지가 아주 작은 사이즈를 다루는 경우에는 문자열로 변환된 값이 부담이 되지 않음

단점

• 문자열 형태로 바껴서 바로 문서 안에 적용이 되기 때문에 문서의 크기가 커짐

File Loader vs URL Loader ⚖️

출력의 형태가 다름

File Loader

• 모듈로 파일을 입력받고 특정한 파일을 바로 출력

URL Loader

• 파일을 입력받고 Data URIs형태로 변환된 문자열을 반환받게 됨
• 리소스를 Data URIs라는 특정한 형태로 변환

  Data URIs

  • data:mediatype;base64,data
    • mediatype : 읽어들인 모듈에 대한 미디어 타입 정보가 기록되는 공간
    • base64 : 바이너리 값, 이진수 값을 텍스트 형태로 인코딩할 때 사용되는 스킴 / 입력으로 읽어들인 이미지 정보 즉, 바이너리 값을 문자열 형태로 변환
    • data : 변환된 형태가 들어간 공간

출처 📝

• Vue.js 압축 완성 올인원 패키지 Online - 패스트캠퍼스

위의 내용은 Webpack을 공부하며 개인적으로 정리한 내용입니다.
본문에 관련된 문제 사항이 있는 경우, 댓글로 남겨주시면 감사하겠습니다! 🙌