Webpack의 로더

해당 포스트의 코드입니다.

 

로더 사용 전

DogPawDev/webpack-example

 

로더 사용 후

DogPawDev/webpack-example

---

Webpack의 로더의 도입은 가장 중요한 내용입니다.

 

진행해보며 알아봅시당

 

우선 Index.html에 css 파일을 넣으려고 합니다.

그렇게 하기 위해선 최종적인 산물이 만들어지는 public 폴더에 css파일을 만들어 줍니다.

 

/public/style.css

body{
    background-color: powderblue;
    color: tomato;
}

 

 

Index.html 내용도 수정해 줍니다.

 

정상적으로 나타납니다.

 

그런데 js파일은 번들링을 통해 통합한 파일을 받는데 css 파일은 추가로 받아지는 상황이 생깁니다.

 

이를 해결하기 위해 사용하는게 webpack의 로더 입니다.

 

(로더가 이 css를 함께 번들링 해주는 기능만이 있는 것은 아니고 여러 기능들 중에 하나이며 그중 css를 통합해주는 기능도 있는 것 입니다.)

 

css-loader 가 png,css 같은 것들도 통합을 시켜주는 기능을 합니다.

 

로더를 잘 활용하면 웹팩을 보다 효율적으로 사용 할 수 있습니다.

 

Asset Management | webpack

설명 설명 ~~

 

해당 자료를 알아봅시다.  Asset = 이미지, js , css 같은 모든 것들 = 자산

 

자산을 어떻게 관리하는지에 대한 내용이 나와 있습니다.

 

해당 모듈 사용방법 설명

다음 내용에서 보면 npm에서 다음과 같은 것들을 다운 받아 환경설정 파일에 다음과 같이 작성하라는 것들이 나옵니다.

 

 npm install --save-dev style-loader css-loader

 

여기서 --save-dev가 이전 글에서 사용한 -D와 동일 합니다.

 

 

그리고 webpack 의 환경설정을 수정해 줍니다.

 module:{
      rules:[
        {
          test: /\.css$/,
          use:[
            'style-loader',
            'css-loader',
          ]
        }
      ]
    }

webpack을 통해 가공하는 데이터들에서(~~~.js, ~~~.css,, ~~~.png, 등등 번들링을 할 파일들) 확장자가 css 인 파일을 만나면 style-loader, css-loader를 사용하라는 설정 입니다.

 

웹팩에 정규표현식으로 .css를 검출하라는 부분이 test입니다.

 

Webpack을 동작시켰을 때 css인 확장자를 만나면 그 파일을 webpack 안으로 넣어주는 역할이 css-loader 모듈입니다.

 

즉 css 만나면 css-loader 실행 한다는 의미입니다.

 

이제 로더를 활용해 봅시다.

 

 

---

번들링을 통해 css를 통합해 사용하기 위해선 다음과 같이 수정합니다.

기존 css 방식 삭제

import 추가

번들링 대상이 아니였기 때문에 css파일이 public 폴더에 있었지만 이젠 번들링 대상이므로 source 폴더로 style.css를 이동시켜 줍니다

 

Npx webpack 명령어를 통해 실행을하면

 

Webpack은 우선 환경설정을 토대로 실행을 하게 됩니다.

 

이를 토대로 index.js를 해석하다 css 인 확장자를 만나게 되면 css-loader 에게 전달하게 됩니다.

 

해당 로더가

 

import css from "./style.css";

 

css 변수에 넣어줍니다.  (import css from "./style.css")

 

실행을 하고 크롬 브라우저의 consle에서 css 변수를 확인해봅니다.

 

다음과 같이 css 객체를 보면 css 내용이 담겨 있는 것을 확인 할 수 있습니다.

이 코드를 통해 JS에서 해당 내용을 넣어주는 작업을 하면 css 역할을 하게 되는 겁니다.

그런데 위 이미지는 style-loader를 설치하지 않고 css-loader만 설치했을 때 보여집니다.

 

포스트 내용 그대로 따라 했다면 이 화면이 정상입니다.

 

아까 css로더를 설치하는 과정에 style-loader도 설치를 했는데 style-loader가 head 태그에 주입하는 과정을 자동으로 해주는 겁니다.

 

이 친구

css 파일은 보이지 않는다.

style 태그가 자동으로 들어가 있습니다!

크롬 개발자 도구에서 elements를 확인해보면 없던 head 태그와 작성한 css가 들어가 있는 것을 확인 할 수 있습니다.

 

즉 로더라는 것은 입력한 asset들을(이미지,js,css 등등) 로더라는 상자에 넣어 우리가 원하는 결과물을 만들어주는 기능입니다.

 

로더를 셋팅하는 module의 rules의 내용에서 자신이 사용하는 로더에 따른 설정을 넣어주면 test 에서 특정 확장자가 검출되면 use에 명시되어 있는 로더를 사용하게 됩니다.

 

하지만 해당 포스트에서는 css-loader 먼저 실행이 됩니다. 그리고 style-loader 가 실행되는데 이 둘은 연결되어 작동하는 모듈이기 때문에

이를 체이닝 되어 있다고 합니다.

 

Loaders | webpack

다양한 로더들을 확인 할 수 있습니다.

 

공식적으로 지원하는 로더와 커뮤니티에서 만든 로더들의 설명이 잘 나와 있습니다. 해당 문서에서 필요한 로더를 찾아 활용하면 됩니다.