주요 로더와 순서

이전 포스팅에서 로더가 어떻게 작동하는지 어떻게 설정하는지만 살짝 알아봤으니

이번엔 어떤 로더를 사용하는지 어떻게 활용하는지에 대해서 알아보자

css-loader

웹팩이 css를 번들링할 때 도움을 주는 로더다

css-loader를 설치하고 다음과 같이 설정해주면된다

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

당연히 css를 대상으로 하는 로더니까 .css로 끝나는 파일을 찾아서 css-loader를 돌려주게끔 설정

하지만 css-loader만 사용해서 번들링을 하면 css가 제대로 적용되지 않는다

위의 로더만 사용할 경우 css의 내용이 자바스크립트 파일에 문자열로만 들어가고 적용시키는 역할은 하지 않기 때문에

style-loader를 같이 사용해주어야 한다

style-loader

위에서 css-loader가 css를 js의 문자열로 변환시켜줬다면 style-loader는 변환된 문자열을 해석해서 스타일을 적용시켜주는 일을 한다

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

똑같이 css에 적용하기 때문에 같은 test 패턴을 가진 객체에 로더를 추가시켰는데

이 때 로더가 적용되는 순서는 밑에서부터 위로 올라가면서 적용된다

css-loader가 css파일을 문자열로 바꾼 뒤, style-loader가 문자열을 바탕으로 DOM에 적용시켜주는 것

file-loader

위의 로더들로 css에서 (png확장자를 가진)파일을 사용해서 이미지를 불러온다면 어떻게 될까?

파일을 제대로 읽지 못하고 번들링 과정에서 에러가 발생한다

파일을 읽기 위해 필요한 로더가 file-loader다

    module: {
            ...
            {
                test: /\.png$/,
                  use: 'file-loader'
                }
            }
        ]
    }

이전 로더들과 마찬가지로 png파일을 대상으로 로더를 돌린다

이번에는 에러를 발생시키지 않고 제대로 성공

하지만 어째서인지 브라우저를 켜보면 제대로 화면에 이미지가 출력되지 않는 것을 알 수 있는데

inline 스타일을 확인해 보면 index.html과 같은 폴더에 있는 이미지 파일을 불러오고 있다

하지만 우리가 번들링한 파일들은 dist 폴더 내부에 있기 때문에 파일을 찾을 수 없는 것

그래서 file-loader를 사용할 때 설정값을 몇 가지 주어야한다

            {
                test: /\.png$/,
                loader: 'file-loader',
                options: {
                    publicPath: './dist',
                    name: '[name].[ext]?[hash]'
                }
            }

publicPath는 파일 로더를 거쳐간 파일들을 모듈로 사용할 때 앞의 index.html 처럼 경로를 착각하지 않게 경로를 지정해주는 옵션이다

번들링 아웃풋은 모두 dist폴더에 있으니 dist로 설정해주었다

name은 []안에 있는 것들을 모두 동적으로 처리해서 파일 이름을 생성해주는 옵션

이제 프로젝트를 빌드하면 정상 작동한다

url-loader

file-loader는 모든 파일을 다 복사해서 빌드했지만

크기가 작은 이미지 파일은 Base64로 인코딩해서 문자열 형태로 소스코드에 넣어서 보관하는 방식의 로더이다

            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'url-loader',
                options: {
                    publicPath: './dist',
                    name: '[name].[ext]?[hash]',
                    limit: 20000, //20kb
                }
            }

사용법은 file-loader와 동일하며 옵션에 limit라는 설정값만 추가해 주면 된다

설정 해놓은 크기보다 작은 파일들은 base64로 인코딩 되어 문자열로 파일에 합쳐지게되고 그 보다 큰 파일들은 file-loader와 동일하게 처리한다