Jaehyun's Dev Story

공부해서 남준다.

2. webpack loader

Posted on In Disqus:

webpack은 여러 개 파일을 하나의 파일로 합쳐주는 번들러(bundler)다.
로더(Lodaer)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 HTML, CSS, Image, Font 등을 변환하여 자바스크립트에서 직접 로딩할 수 있도록 해준다.

커스텀 로더 만들기

로더를 사용하기 전에 커스텀 로더를 만들어서 확인해 보자.

cumstomLoader.js 생성

cumstomLoader.js
1
2
3
4
module.exports = function customLoader (content) {
    console.log("커스텀 로더 작동");
    return content;
};

webpack.config.js파일의 module 객체에 추가

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const path = require("path");

module.exports = {
    mode: "development",
    entry: {
        main: "./src/app.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve("./dist"),
    },
    module: {
        rules: [{
            test: /\.js$/, // .js 확장자로 끝나는 모든 파일
            use: [path.resolve("./src/customLoader.js")] // 방금 만든 로더를 적용한다
        }],
    }
}
  • test에는 로딩에 적용할 파일을 적용한다. 정규화 표현식을 이용해서 .js 확장자의 모든 파일을 처리
  • user에는 이 패턴에 해당하는 방금 만든 cumstomLoader.js 경로를 지정

커스텀 로더 실행

1
2
3
4
5
6
7
$ npm run build

> frontend-dev-env@1.0.0 build C:\workGit\frontend-dev-env
> webpack

커스텀 로더 작동
커스텀 로더 작동

터미널에 ‘커스텀 로더 작동’ 문자열이 나오고, cumstomLoader() 함수가 동작한 것을 확인할 수 있다.

css-loader

CSS 파일을 자바스크립트에서 불러와 사용하려면 CSS 모듈 변환하는 작업이 필요한데, css-loder가 CSS 모듈 변화 작업을 진행하여 사용할 수 있게 한다.

css-loader 설치

1
$ npm install -D css-loader

style.css

style.css
1
2
3
body {
  background-color: green;
}

app.js

app.js
1
import "./style.css"

webpack.config.js에 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const path = require("path");

module.exports = {
    mode: "development",
    entry: {
        main: "./src/app.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve("./dist"),
    },
    module: {
        rules: [{
            test: /\.css$/, // .css 확장자로 끝나는 모든 파일
            use: ["css-loader"], // ss-loader를 적용
        }],
    }
}
  • 웹팩은 엔트리 포인트 부터 검색하여 css 파일을 찾으면 css-loader가 처리 한다.

css-loader 변환 확인

1
$ npm run build

dist/main.js 파일에 background-color: green 검색하면 css 코드가 자바스크립트로 변환된 것을 확인할 수 있다.

style-loader

css-loader로 변경된 style sheet는 Dom에 추가되어야만 브라우져가 해석할 수 있다. style-loader는 자바스크립트로 변경된 스타일을 동적으로 Dom 에 추가하는 로더이므로 css-loader와 style-loader는 함께 사용해야 된다.

style-loader 설치

1
$ npm install -D style-loader

webpack.config.js에 추가

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const path = require("path");

module.exports = {
    mode: "development",
    entry: {
        main: "./src/app.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve("./dist"),
    },
    module: {
        rules: [{
            test: /\.css$/, // .css 확장자로 끝나는 모든 파일
            use: ["style-loader", "css-loader"], // style-loader를 적용
        }],
    }
}

rules.use에 배열은 앞에서부터 순서대로 로더가 작동

style-loader 변환 확인

1
$ npm run build

file-loader

webpack output에 파일을 옮겨주는 것이 file-loader이다.

file-loader 설치

1
$ npm install -D file-loader

style.css

style.css
1
2
3
body {
  background-image: url(./dist/bg.png);
}

webpack.config.js

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const path = require("path");

module.exports = {
    mode: "development",
    entry: {
        main: "./src/app.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve("./dist"),
    },
    module: {
        rules: [
            {
                test: /\.css$/, // .css 확장자로 끝나는 모든 파일
                use: ["style-loader", "css-loader"], // style-loader를 적용
            },
            {
                test: /\.png$/, // .png 확장자로 마치는 모든 파일
                loader: "file-loader",
                options: {
                    name: "[name].[ext]?[hash]", // 파일명 형식
                }
            }
        ],
    }
}
  • publicPath은 file-loader가 처리하는 파일 모듈로 사용할 때 앞에 추가되는 문자열
  • name은 ‘bg.png?c1771da01a4975d381c2b5583293a075’ 형식으로 파일 변경 요청

file-loader 변환 확인

1
$ npm run build

url-loader

url-loader가 처리하는 옵션 중 fallback 기본값이 file-loader이다.
이미지를 Base64로 인코딩하여 문자열 형태로 소스에 넣어주는 형식으로 처리해 주는 게url-loader이다.

url-loader 설치

1
$ npm install -D url-loader

app.js

app.js
1
2
3
4
5
6
7
8
import "./style.css"
import small from './small.png';

document.addEventListener('DOMContentLoaded', () => {
    document.body.innerHTML = `
        <img src="${small}" />
    `
})

webpack.config.js

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const path = require("path");

module.exports = {
    mode: "development",
    entry: {
        main: "./src/app.js"
    },
    output: {
        filename: "[name].js",
        path: path.resolve("./dist"),
    },
    module: {
        rules: [
            {
                test: /\.css$/, // .css 확장자로 끝나는 모든 파일
                use: ["style-loader", "css-loader"], // style-loader를 적용
            },
            {
                test: /\.(png|jpg|svg|gif)$/,
                use: {
                    loader: "url-loader", // url 로더를 설정한다
                    options: {
                        name: "[name].[ext]?[hash]", // file-loader와 동일
                        limit: 100000 // 100kb 미만 파일만 data url로 처리
                    }
                }
            }
        ],
    }
}

`limit에 설정한 값에 따라 100kb 미만 파일은 Data url 형태로 변환.
아이콘처럼 사용 빈도수가 높은 이미지 파일을 사용하면 좋다.

url-loader 변환 확인

1
$ npm run build

소스코드

참조