Loader

javascript, css, image, font등을 javscript코드로 가져와서 사용할 수 있게 함. 

 

---

대표적 Loader 4가지 

 

css-loader

 css파일을 자바 스크립트 모듈처럼 사용할 수 있도록 지원 (import './style.css')

style-loader

 자바스크립트 문자열 스타일 코드를 html에 주입시켜 브라우저에 스타일이 적용되도록 지원

//webpack.config.js
{
	...
    module : {
    		rules:[
            	...,
                      {
                        test: /\.css$/,
                        use: ["style-loader", "css-loader"], 
                      },
                 ...,
            ]
    }
}

• .css파일이 있으면 style-loader와 css-loader를 실행

---

file-loader

 이미지 파일을 모듈러 사용할 수 있도록 변환 지원. 

 변환된 모듈을 output경로(./dist)로 이동하는 역할

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

• .png파일이 있으면 file-loader실행
• publicPath : 빌드된 이미지 파일이 있는 위치
• name : 빌드된 파일의 이름을 유동적으로 사용할 수 있도록 지정
  •     [name].[ext] :빌드된 파일의 이름과 확장자
  •     [hash] : 이미지 빌드 hash값을 주고, 빌드할 때 마다 이미지가 새로 빌드될 수 있도록 지정
  •     ex) ./dist/cat.jpg?8dccb500dbeb54b02452ed58fed2409d

 

---

url-loader

파일은 base64로 변환해서 인코딩하여 <img src=""/>에 적용하는 형식

파일  사이즈에 제한을 두고 일정 사이즈의 이미지를 인코딩할 수 있도록 지정

 

 src에 이미지 url을 넣을 사용하는 이미지가 많으면 사이트 성능에 영향을 줌. 

data-uri : image src에 인코딩 형식의 문자열을 넣어주면 이미지로 랜더링 됨

//webpack.config.js
{
	...
    module : {
    		rules:[
            	...,
                      {
                        test: /\.(png|jpg|gif|svg)$/,
                        loader : 'url-loader',
                        options : {
                        	publicPath : './dist/',
                        	name : "[name].[ext]?[hash]",
                            limit : 20000,
                        },
                      },
                 ...,
            ]
    }
}

• 파일의 확장자가 png, jpg, gif, svg이면 url-loader를 실행
• publicPath : 빌드된 이미지 파일이 있는 위치
• name : 빌드된 파일의 이름을 유동적으로 사용할 수 있도록 지정
• limit : 파일사이즈 2kb기준 미만이면 script문자열로 변환, 이상이면 파일path를 가져와서 렌더링
  • 2kb미만 : <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEh....." />
  • 2kb이상 : <img src="./dist/cat.jpg?8dccb500dbeb54b02452ed58fed2409d" />

 

 

 

 

---

참고 : 

- https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html#4-%EC%9E%90%EC%A3%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%A1%9C%EB%8D%94