웹펙 - 로더 (loader)

loader (로더)

: javascript, css, style, image 등 파일들을 모듈로 로드할 수 있게 도와준다.

 

 

webpack-loader.js

: 패키지 최상단 webpack.config.js 파일과 동일한 경로에 생성

module.exports = function myWebpackLoader(contents) { 
    console.log('test~!!'); 
    return contents; 
}

 

 

webpack.config.js

module : { 
    rules :[ 
        { 
            test : /\.js$/,     
            //.js로 끝나는 모든 파일들은 use키값의 로더로 실행된다. (loader가 처리해야할 파일의 패턴 (정규식)을 입력) 
            use : [ path.resolve('./webpack-loader.js') ]    
            // 모든 js 파일에 webpack-loader.js 가 실행되게 선언. 
        } 
    ] 
}

> 실행결과

: js파일이 2개 있는 경우, 로더로 js파일 모두 실행함으로, console.log는 2번 찍힌다.

 

 

 

 

 

 

* console.log 를 alert로 변경하는 경우

 

webpack-loader.js

module.exports = function myWebpackLoader(contents) { 
    return contents.replace('console.log(', 'alert('); 
}

> contents 파라미터는 로더로 읽은 js 코드의 내용이며, myWebpackLoader 함수 내에서 코드 변환 가능.

 

 

 

---

 

loader 종류

1. css-loader

: css파일을 모듈로 호출할 수 있는 로더.

 

 

app.js

import './app.css';

 

> app.css 파일이 모듈이 되어야 동작하며, webpack의 css-loader로 동작.

 

 

app.css

body{background-color : green;}

 

 

터미널

npm install css-loader

> css-loader 설치

 

 

 

webpack.config.js

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

 

> 빌드 후 실행

: /dist/main.js 에서 css코드가 제대로 반영되었는지 확인.

 

css코드만 반영되고, html에는 반영되지 않음 

    -> js에서 css파일만 호출하고 DOM 스타일로 변환되지 않았기 떄문에 html에서는 반영되지 않음 (css OM 형태로 변환해야 한다.)

 

 

 

 

 

2. style-loader

: javascript 의 style로 변경된 코드를 html 에 반영해주는 로더.

css를 모듈로 사용하려면, css-loader, style-loader  두가지 모두 config에서 선언되야 한다.

 

 

터미널

npm install style-loader

 

 

webpack.config.js

...

use : ['style-loader','css-loader']

...

 

> 로더의 use는 배열로 선언하며, 배열의 뒤에서부터 앞으로 실행한다.

css 로드 후, style 로더 호출

 

 

> 실행결과

: app.css 의 스타일이 html에 반영된다.

 

 

 

 

 

 

3. file-loader

: file/image 이나, css의 이미지파일을 가져올 수 있는 로더.

 

 

터미널

npm install file-loader

 

 

app.css

body{background-image : url('test.png')}

 

 

webpack.config.js

...

,{

test : /\.png$/,

use : [ 'file-loader' ]

}

...

 

> file이 호출(저장)되지만, 파일명이 임의의 hash값으로 저장된다.

    캐시 때문에 매번 다른 hash값으로 지정된다.

 

> 실행결과

: error

background-image 파일명이 file-loader 로 호출된 임의의 hash 파일명으로 변경되어 있어서 파일을 찾지 못하는 에러 발생.

 

 

> 해결 :

webpack.config.js

...

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

> publicPath  : file-loader 가 처리하는 파일모듈의 경로 앞에 붙는 경로를 정의 ('./dist/' : output 경로, 결과 경로 : './dist/test.img?hash값')

> name : file-loader 가 파일 output 에 파일을 복사할 때 사용하는 파일명.

        [name].[ext] : 원본파일명과 확장자

        [hash] : (쿼리스트링) 캐시로 이전 파일을 호출하는 것을 방지하기 위해, 매번 변경되는 hash값을 이름뒤에 붙임으로서 캐시의 영향력을 없앤다.

 

 

 

 

 

 

4. url-loader

: 로드에 사용되는 이미지 개수가 많고, 성능에 영향을 끼치며, 작은 이미지를 여러개 호출할 때는 Data URI Scheme 를 이용한다.

(이미지를 base64로 인코딩해 이미지태그로 호출)

 

 

ex)

<image src="data:image/png;base64, iBFDSKL;FJ4FLEJSLFJSDLFJLD433KLDSFJL..DFSJ3E==" />

네트워크 통신을 하지 않고 이미지태그로 바로 로딩이 가능.

 

url-loader는 이러한 과정을 도와주는 로더이다.

 

 

 

 

app.js

import './app.css';
import testimg from './testimg.jpg';

//testimg 이미지를 testimg 라는 이름으로 import 한다.
document.addEventListener('DOMContentLoaded', () => {
	document.body.innerHTML = '<img src="${testimg}">';
})

 

 

터미널

npm install url-loader

 

 

webpack.config.js

...

 ,{
  test : /\.(png|jpg|svg|gif)$/,
  loader : 'url-loader',
  options : {
  publicPath : './dist/',
  name : '[name].[ext]?[hash]',
  limit : 20000
  // (20kb) file 용량 세팅 
  // : 해당 용량의 미만인 경우 url-loader를 통해 base64 문자열로 변환하며, 
  //	해당 용량의 이상인 경우 file-loader 를 실행해 파일을 복사한다.
  }	
}

> 실행결과

: 20kb 미만인 이미지는 이미지태그로 base64 형태로 출력됬으며, 20kb 이상인 이미지는 복사되어 html 에 반영됬다.