Webpack - Loader에 대해 알아보기

♣ Webpack Loader에 대해서 알아보자 

- 리액트로 플젝을 진행할 때 css, font, image 등 사용할 때 뭔가 설정했던 기억 없음... 왜? 이미 CRA로 webpack이 전부 설정되어 있었기 때문

플젝의 자원을 사용할 수 있게 도와주는 Webpack의 Loader는 Webpack이 웹앱을 해설할 때 자바스크립트 파일이 아닌 웹자원(HTML, CSS, Images, Font)들을 변환할 수 있도록 도와주는 속성이라고 생각하면 된다.

 

지금 해보는 건 scss를 사용한 스타일링이 가능하도록 작업환경을 만들어볼 건데 그러기 위해선 아래와 같이 라이브러리 설치가 필요하다

npm i -D css-loader style-loader sass sass-loader

 

중간에 sass가 들어간 이유는 해당 스타일문법도 라이브러리로 설치가 필요해서 함께 설치를 진행했다.

 

- 스타일링할 때 주로 사용되는 모듈은?

이름	설명
style-loader	CSS를 JS파일로 변환한 후 , HTML의 <style> 태그로 삽입
css-loader	@import 나 url()을 해석해서 CSS를 JS에서 import 가능하도록 변환
less-loader	.less 파일을 DSS로 변환 (Less를 지원하는 loader)
sass-loader	.sass 또는 .scss 파일을 CSS로 변환
postcss-loader	PostCSS 플러그인 적용 가능 (예시 : 자동 접두사 추가, 최적화)
stylus-loader	.styl 파일을 CSS로 변환 (Stylus 지원)

 

웹팩 설정을 아무것도 하지 않고 아래와 같이 파일 생성 적용 후 build를 하면? 오른쪽 이미지와 같은 오류 발생

- 웹팩에 설정해 보기

test : 일반적으로는 정규식을 사용하며 로더를 적용할 파일의 유형이다.

use : 해당 파일에 적용할 로더의 나열 배열로 작성해야 하며 여기서 주의! 해야 하는 점은  배열 안에 있는 값들이 역순으로 작동하기 때문에 순서를 확인해서 작성해야 한다. 이유는? css-loader로 CSS로 변환을 한 다음에 style-loader를 제대로 인지할 수 있기 때문에!

module: {
    rules: [{ test: /\.s[ac]ss$/i, use: ['style-loader', 'css-loader', 'sass-loader'] }],
  },

// 현재 폴더구조
├── dist
│   ├── index.html
│   └── main.js
├── package-lock.json
├── package.json
├── path.js
├── node_modules
├── src
│   ├── index.js
│   ├── randomAddress.js
│   └── style
│       └── main.scss
└── webpack.config.js

 

위와 같이 설정하고 다시 한번 build를 진행했더니 아래와 같이 이슈 없이 작동!

 

 

여기서 궁금한 게 생겼는데 key값으로 test, use는 어떤 걸 의미하는 걸까...?라는 정해진 걸까...?

일단 답은 정해졌다 공식문서를 찾아보니까 Rule에 test랑 use가 둘 다 존재하였다..

test 키 : module.rules 내에 특정 파일 유형을 식별하기 위해사용, 보통은 정규식 표현을 사용하여. 파일확장자로 끝나는 형식을 만들어줌use 키 : module.rules 내에서 특정 로더를 지정하기 위해 사용, 여러 로더를 배열로 지정가능, 오른쪽에서 왼쪽 또는 아래에서 위의 순서로 실행엔 어떻게 로더가 찾아가지?라고 생각이 들었는데 test에 작성된 확장자에 맞게 로더가 찾아간다고 생각하면 될듯하다

키	의미	실행 방식
test	Webpack에게 어떤 파일을 처리할지 알려주는 키 주로 **정규표현식(Regex)**을 사용하여 특정 확장자나 파일을 식별	Webpack은 파일을 탐색할 때, module.rules 내의 test 정규식 조건에 맞는지 비교하여 해당하는 로더를 실행
use	해당 파일에 어떤 로더를 적용할지 정의하는 키. 로더의 이름 또는 배열을 지정	use에 여러 로더가 배열로 지정되면, 오른쪽에서 왼쪽 또는 아래에서 위로 순차적으로 실행 각 로더는 이전 로더의 결과를 바탕으로 동작

 

🔗 test공식문서   🔗 use공식문서 

 

 

webpack의 확장 기능 중 파일 변환하는 역할인 loader에 대해서 알아봤다 다음번엔 다른 확장기능인 plugin에 대해 정리할 예정이다.