★Webpack 6회차 - 로더의 도입

https://youtu.be/5ym8ozubCTA

로더는 웹팩의 핵심이라고 할 수 있는 중요한 개념이다.

index.html에 css파일을 추가하고 싶으면 번들링 파일이 저장 되는 최종 위치(현재 연습 프로젝트에서는 public 폴더)에 css파일을 만들어준다.

위 css파일을 index.html에 링크한다.

출력하면 아래와같이 화면에 잘 출력되지만 네트워크를 확인하면 css파일은 번들링 되지 않은 상태로 다운로드 받고 있다.

로더란?

웹팩은 자바스크립트 뿐만 아니라 png 파일, CSS 파일 등도 번들링해준다. 그 역할을 하는 것이 "로더"이다.

웹팩을 잘 다루는 것은 이 로더를 얼마나 원하는대로 잘 다루는가가 핵심이다.

로더 설정 셋팅

웹팩 홈페이지의 Documentation-guides-asset management 페이지를 보자. (https://webpack.js.org/guides/asset-management/)
LOADERS 메뉴에서는 각종 로더들이 정리되어 있다.

asset(자산)은 우리가 다루는 JS, CSS 등을 의미한다.
이 페이지에는 우리가 사용하는 이 자산들을 어떻게 관리하는가에 대한 설명이 있다.

지금 필요한 CSS를 번들러로 로딩하는 방법도 있다.

npm install --save-dev style-loader css-loader
여기서 --save-dev는 지난 시간에 사용했던 -D와 같다.
style-loader와 css-loader를 설치한다.
위의 사진을 참고하여 webpack.config.js 파일을 설정한다.

index.html의 <head></head> 부분을 아예 삭제하고 source폴더 안의 index.js 파일에 CSS를 번들링 시켜주자.
(이 css 파일을 만들 때는 css 파일이 번들링 대상이 아니었기 때문에 public 폴더 안에 생성했는데 이제 번들링 대상이기 때문에 source 폴더 안으로 옮겨준다.)
다른 파일들을 번들링 할 때와 마찬가지로 index.js 파일에서 css 파일을 import 한다.

import hello_word from "./hello.js";
import world_word from "./world.js";
import css from './style.css';
document.querySelector('#root').innerHTML = hello_word+' '+world_word;
console.log('css',css);

=> npx webpack으로 웹팩을 실행하게 되면 웹팩은 webpack.config.js 설정을 기반으로 엔트리 파일인 index.js 파일을 읽다가 조금 전 import했던 확장자가 css인 파일을 만나고 webpack.config.js의 module - rules 설정에 따라 css파일은 css-loader에게 맡긴다.
그러면 css-loader가 해당 css파일을 읽어서 index.js에서 css 파일을 불러오는 변수(import css from './style.css'에서 css를 의미) 안에 셋팅해준다.
따라서 console.log('css', css);의 변수 css에 그 셋팅이 들어가는 것.

출력된 결과를 확인하면 css파일이 자바스크립트 형태로 웹팩을 통해 주입된 것을 확인할 수 있다.
이 자바스크립트 형태로 변환된 css 코드를 자바스크립트를 이용해서 웹페이지에 적용시키면 되는데 조금 전 설치한 로더들 중 'style-loader'가 이 작업을 해주는 로더이다!

style-loader는 css-loader로 css파일을 읽어와서 웹팩을 통해 가져온 css 코드를 웹페이지 안에 style 태그로 주입해주는 로더.

webpack.config.js 파일에 style-loader를 추가하자.

style-loader를 추가한 후에 웹팩을 다시 실행한 후 브라우저를 새로고침 하면 아까와 같이 css 파일이 적용된 페이지가 출력된다.

네트워크 확인 시 css파일을 다운로드 받지 않고 bundle 파일만 다운 받는 것을 볼 수 있고

Elements를 확인하면 <head>태그 안에 <style>태그가 생긴 것을 볼 수 있다.

로더는 입력한 Asset들을 로더를 통과 시켜서 가공하여 원하는 output을 만드는 일종의 가공 공정이라고 할 수 있다.

로더 세팅은 webpack.config.js파일의 module의 rules의 test부분에 로더에 해당되는 이름을 검출하는 코드를 두고 그 조건에 해당되는 파일이 발견되면 use에 있는 로더들을 통과시켜서 처리하는 구조다.

주의사항은 use에서 뒷쪽에 있는 로더가 먼저 실행된다.
현재 설정으로 보면 css-loader가 먼저 실행되고 그 다음에 style-loader가 실행된다.
이렇게 엮여서 동작하는 것을 '체이닝'이라고 부른다.

Author And Source

이 문제에 관하여(★Webpack 6회차 - 로더의 도입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hey880/Webpack-6회차-로더의-도입

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

★Webpack 6회차 - 로더의 도입

로더란?

로더 설정 셋팅

Author And Source

좋은 웹페이지 즐겨찾기