로더의 역할

로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성이다. 로더를 사용하면 모든 파일을 모듈로 변환해 주기 때문에 자바스크립트에서 import 구문을 통해서 자바스크립트 영역에서 사용이 가능하다.

1. 모든 파일을 자바스크립트의 모듈처럼 만들어준다.
2. 타입스크립트 같은 다른 언어를 자바스킙트 문법으로 변환해 준다.
3. 이미지를 data URL 형식의 문자열로도 변환 가능하다.
4. CSS 파일을 자바스크립트에서 직접 로딩할수 있게 해준다.
결론 네가지의 역할 뿐 아니라 로더는 각 파일들을 처리 할때 사용할수있다.


커스텀 로더 만들기

로더는 함수 형식으로 만든다. 함수의 파라미터로 content를 받아온다. 이 content에는 파일의 content가 저장되어 있다. 그래서 로더는 파일의 내용을 변경하거나 처리할때에 사용할수 있다.

1
2
3
4
// loader.js
module.exports = function myWebpackLoader(content) {
    return content.replace('console.log', 'alert');
}
1
2
3
4
5
6
7
8
9
10
11
12
// webpack.config.js
module.exports = {
    // ...
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: './loader.js'
            }
        ]
    }
}

로더는 webpack.config.js의 module.rules 배열에 들어간다. 로더는 파일 유형별로 처리할 로더들을 등록 해준다.
하나의 로더에 처리할 파일들을 등록 하는게 아닌, 파일 하나(또는 그 이상)에 처리할 로더를 등록 해주는 것이기 때문에, 파일 유형별로 여러개의 로더가 등록 가능하다.

  • test : 로더를 적용할 파일 유형 (일반적으로 정규 표현식 사용)
  • loader : 로더를 하나만 등록 할때 이렇게 사용 하면 될거 같다.
  • use : 파일에 적용할 로더를 등록 (배열) 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    module.exports = {
        // ...
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        '로더 모듈 이름',
                        '로더 경로' // './loader.js' 또는 path.resolve('./loader.js'),
                        // 객체로도 등록 가능하다.
                        {
                            loader : '로더',
                            options: {
                                
                            }
                        }
                    ]
                }
            ]
        }
    }
    use에 등록 된 로더는 뒤에서 부터 먼저 실행된다.
    style-loader는 css-loader가 등록 된 후에 사용가능하다. 그렇기 때문에 css-loader보다 앞쪽에 등록해야 한다.

실제로 커스텀로더를 사용할 일은 거의 없다. 로더가 어떤식으로 파일을 처리 하기 위해서 만들어본것이다.


자주사용되는 로더

css-loader

자바스크립트에서 CSS를 모듈로 변환해주는 역할을 한다.

1
npm install -D css-loader
1
2
3
4
5
6
7
8
9
10
11
// webpack.config.js

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

이제 자바스크립트에서 css를 모듈로 가져올수 있다.

1
2
3
4
5
/* test.css */

body {
    color: #111;
}
1
2
3
4
5
// test.js

import style from './test.css';

console.log(style); // 배열로 넘어온다.


style-loader

모듈로 등록된 css를 스타일로 적용시켜 주는 역할을 한다. 모듈로 등록된 css만 적용가능하기 때문에 css-loader가 존재하여야 한다.

1
npm install -D style-loader
1
2
3
4
5
6
7
8
// webpack.config.js

// 웹팩에 style-loader 등록시 순서에 유의!

use: [
    'style-loader',
    'css-loader'
]
1
2
3
4
// test.js

import './test.css'
import style from './test.css'; // 이렇게 해도 등록 해주지만 보통은 위에 처럼 작성한다.

브라우저에서 확인 해보면 head의 style 태그로 스타일이 적용된 것을 확인할수 있다.


file-loader

이름에서도 알수 있듯이 파일을 모듈화 해주는 로더이다. 보통은 이미지 파일이나 폰트 파일을 모듈로 변환할때 사용이된다.

1. 파일을 모듈화 해준다(주로 이미지에 사용)
2. 빌드 후에는 파일을 output 경로에 만들어준다.
3. publicPath 옵션을 통해서 실제 경로와 호출 경로를 일치 시켜주어야 한다.

1
npm install -D file-loader
1
2
3
4
5
6
7
8
9
10
11
12
// webpack.config.js

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

file-loader는 options 속성을 사용가능하다.

  • publicPath : 파일을 사용할때 경로 앞에 붙는 문자열이다. 아래와 같은 경로에 있을때 publicPath를 설정하지 않으면 파일이 저장된 경로와 호출 경로가 달라 이미지를 불러오지못한다.
    1
    2
    3
    4
    index.html
    dist
    ├── components	       
    └── image.png
  • name : 번들링 된 이미지 파일을 저장할 때 사용될 파일이름이다. [name], [ext], [hash] 를 사용 가능하다.
    • [name] : 실제 이미지 파일 이름을 그대로 사용한다.
    • [ext] : 실제 확장자를 사용한다.
    • [hash] : 파일이름에 해쉬 값을 사용한다. 브라우저는 이름이 동일한 파일에 대해서 캐시를 저장하고 있어, 파일의 내용이 달라져도 캐시가 존재하면 새로운 파일이 로드되지 않는다. hash처럼 계속 값이 달라지면 캐시를 무력화하여 최신 파일을 로드 할수 있다.

자바스크립트에서 모듈화된 이미지를 불러 올때 아래와 같이 사용한다.

1
2
3
4
5
import image from './image.png';

document.querySelector('body').innerHTML = `
    <img src='${image}'>
`

url-loader

사용하는 이미지 개수가 많다면 네트워크 리소스를 사용하는 부담이 생겨 사이트 성능에 영향을 준다. 한 페이지에 작은 이미지를 여러개 사용한다면 DATA URI Scheme을 이용하는 것이 좋은 방안이 될수 있다(네트워크 통신을 안하게 해준다). 이러한 처리를 해주는 것이 url-loader이다.

1
npm install -D url-loader
1
2
3
4
5
6
7
8
9
10
11
rules: [
    {
        test: '/\.png$/',
        loader: 'file-loader',
        options: {
            publicPath: './dist',
            filename: '[name].[ext]?[hash]',
            limit: 20 * 1024
        }
    }
]

사용방법은 file-loader와 유사하다. url-loader는 limit라는 옵션을 사용가능한데 해당 파일의 크기 이하는 url-loader를 사용하고 그 이상은 file-loader를 사용하도록 해준다. 그래서 웹팩에 url-loader만 등록 하더라도 file-loader가 설치되어 있어야 한다(물론 limit 이하만 사용하는 경우에는 에러는 발생하지 않는다. limit 초과하는 파일이 존재할때 에러발생)

  • limit : url-loader를 사용할 파일 크기. limit을 너무 높게 잡아도 좋지 않다. (단위는 byte)