url-loader 설정

url-loader는 file-loader와 출력의 형태가 다르다.

file-loader는 파일을 그대로 출력해주는 역할을 한다면 url-loader는 파일을 data uri문자열형태로 변환해준다.

 

url-loader 설정

yarn add url-loader -D

webpack의 module에 loader를 설정한다.

module.exports = {
    ...,
    module: {
        rules: [
            ...,
            {
                test: /\.svg$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192
                    }
                }]
            }
        ]
    },
    ...
}

svg파일에 대한 설정을 했다.

options의 limit는 파일 크기의 제한을 두는 것이며, byte단위로 설정한다. 

위에서는 8kb정도로 설정

js에서 svg를 사용하도록 설정 후 실행해서 살펴보면 svg파일을 에 대한 정보가 나온다.

data uri로 변환

data uri

 - data:mediatype;base64,파일의변환된문자열 ("data:[<mediatype>][;base64],<data>" 형태, mdn참조)

 - scheme에 "data:"가 접두어로 붙은 URL은 컨텐츠 작성자가 작은 파일을 문서 내에 인라인으로 임베드할 수 있도록 해줌

 - mediatype은 파일의 media type(image, text 등)이 온다.

 - base64는 binary값을 text 형태로 인코딩 할때 사용되는 scheme

 

https://v4.webpack.js.org/loaders/url-loader/

url-loader | webpack

공식문서를 보면 관련 여러 옵션이 있다.

fallback옵션은 만약 limit로 설정한 크기보다 큰 파일에 대한 설정을 해주는 것이다. 기본 옵션은 file-loader를 바라보며, 다른 loader를 설정할 수 있다.