로더는 웹팩의 핵심이라고 할 수 있음

HTML에 CSS를 link로 연결했을때,
다운로드 되는 파일은 style.css와 index_bundle.js 총 2가지이다.
js처럼 css도 번들링 할 수 없을까?

loader

입력한 asset(css, jpg...)들을 가공되어 원하는 output을 출력하는 일종의 가공공정

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

뒤쪽에 있는 로더가 먼저 실행됨, 위의 코드에서는 'css-loader'가 먼저 실행되는데, 이를 체이닝이라고 함

CSS를 번들링하기위해 필요한 loader를 설치한다.

install

npm install --save-dev style-loader css-loader  // --save-dev는 -D와 동일함

css-loader

'css-loader'는 css파일을 읽어서 웹팩으로 가져오는 역할
webpack.config.js에 아래를 추가한다.

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

위와 같이 입력시, css 적용이 안된채로 콘솔에 css의 내용이 js형태로 출력된다.

css 
[Array(3), toString: ƒ, i: ƒ]
0: (3) ['./source/style.css', 'body {\r\n    background-color: paleturquoise;\r\n    color: tomato;\r\n}', '']
i: ƒ i(modules, media, dedupe, supports, layer)
toString: ƒ toString()
length: 1
[[Prototype]]: Array(0)

style-loader

'style-loader'는 가져온 파일을 style태그로 웹페이지에 주입해주는역할

webpack.config.js에 아래를 추가한다.

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

index_bundle.js파일만 읽어왔음에도, head에 style태그가 만들어졌고 css파일이 적용되었음을 확인할 수 있다.

test
: /\/.css$/i, : 확장자가 ss인 파일들을 처리하는 방법을 웹팩에게 명시

✨ 참고
https://webpack.kr/guides/asset-management/

https://webpack.kr/loaders/