[WEBPACK] 로더의 종류, 적용 순서

1. 자주 사용하는 로더의 종류

로더 종류	설명
css-loader	css 파일이 js 코드로 변경
style-loader	js로 변경된 css 내용을 동적으로 DOM에 추가, 따라서 css를 번들링하기 위해서는 css-loader, style-loader를 함께 사용함
file-loader	파일을 모듈 형태로 지원, webpack output에 파일을 옮겨줌
url-loader	data URI scheme를 이용하여 이미지를 Base64로 인코딩하여 문자열 형태로 소스코드에 넣는 처리를 자동화하는 loader
babel-loader
sass-loader
vue-loader
ts-loader

 

2. css-loader 적용하기

  2.1. [terminal] npm install css-loader -D

  2.2. css 파일 생성

     /root/src/style.css

body{
    background-color: yellow;
}

 

  2.3. app.js 수정

     /root/src/app.js

import MainController from "./controllers/MainController.js";
import './style.css';


document.addEventListener("DOMContentLoaded", () => {
  new MainController();
});

 

  2.4. webpack.config.js 수정

/**
 * /root/webpack.config.js
 */

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']
        }],
    }
}

    - test : 로더를 적용할 파일 유형

    - use : 해당 파일에 적용할 로더의 이름

 

  : 해당 프로젝트의 모든 css 파일에 대해서 css-loader를 적용하겠다는 의미

 

 

  2.5. build

  

  2.6. 확인

   /root/dist/main.js 파일에서 보면 ./src/style.css 의 내용이 추가 됨을 확인할 수 있음

 

 

3. style-loader

  모듈로 변경된 css 파일은 DOM에 추가되어야만 브라우저가 해석할 수 있음

 

  3.1. style-loader 적용하기

      [terminal] npm install css-loader -D

 

  3.2. webpack 설정파일 수정 [module.rules 추가]

/**
 * /root/webpack.config.js
 */

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를 앞 단에 설정하는 이유는 로더는 뒤에서부터 앞으로 동작하기 때문에, css-loader를 적용한 뒤에

     style-loader를 통해 DOM에 스타일을 적용하는 것

 

   3.3. build

   3.4. 스타일 적용 확인

 

 

4. file-loader

  : 파일을 모듈 형태로 지원하고 webpack output에 파일을 옮겨주는 역할을 함

  css에서 url() 함수에 이미지 파일 경로를 지정하면 webpack은 file-loader를 이용해서 이 파일을 처리함

 

 

  4.1. file-loader 적용하기

    [terminal] npm install file-loader -D

 

  4.2. /root/src/style.css 수정

body{
    background-color: url('./images/city-4490237_1920.jpg');
}

 

  4.3. build

 

  4.4. 이미지 파일 이름이 해시코드로 변경되어 있음을 확인

    : 캐시 갱신을 위한 처리

 

 

  4.5. webpack 설정파일 수정 (file-loader 로더) 

/**
 * /root/webpack.config.js
 */

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/app.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve('./dist'),
    },
    module: {
        rules: [{ 
            test: /\.jpg$/, 
            loader: 'file-loader', 
            options:{
                publicPath: './dist/',          //prefix를 output 경로로 지정
                name: '[name].[ext]?[hash]',    //파일명 형식
                
                //publicPath: file-loader가 처리하는 파일을 모듈로 사용할 때, 경로 앞에 추가되는 문자열
                //name: loader가 파일을 output에 복사할 때 사용하는 파일 이름
            }},
            { test: /\.css$/, use: ['style-loader', 'css-loader']},
        ],
    }
}

  : name의 파일명 형식을 통해서 기본적으로 설정된 해쉬값을 쿼리 스트링으로 옮겨서

url(./dist/city-4490237_1920.jpg?ce1c5c3341afa74df4ea87c7270270df)이런 형태로 파일을 요청하도록 변경한 것

 

  4.6. 빌드

  4.7. 적용 확인

 

 

5. url-loader

사용하는 이미지 개수가 많으면 네트워크의 자원을 사용하는 부담이 크고, 사이트 성능에 영향을 주기 때문에, data uri scheme를 이용하는 방법으로 이미지를 Base64로 인코딩하여 문자열 형태로 소스코드에 넣음. 이런 처리를 자동화해주는 loader

 

  5.1. url-loader 적용하기

    [terminal] npm install url-loader -D

 

  5.2. webpack 설정 수정 (module.rules에 url-loader 추가)

/**
 * /root/webpack.config.js
 */

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/app.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve('./dist'),
    },
    module: {
        rules: [
            {
                test: /\.jpg$/,
                loader: 'url-loader',
                options:{
                    publicPath: './dist/',
                    name: '[name].[ext]?[hash]',
                    limit: 5000,    //5kb 미만의 파일만 data url로 처리
                }
            },
            { 
                test: /\.jpg$/, 
                loader: 'file-loader', 
                options:{
                    publicPath: './dist/',          //prefix를 output 경로로 지정
                    name: '[name].[ext]?[hash]',    //파일명 형식
                    
                    //publicPath: file-loader가 처리하는 파일을 모듈로 사용할 때, 경로 앞에 추가되는 문자열
                    //name: loader가 파일을 output에 복사할 때 사용하는 파일 이름
                }
            },
            { test: /\.css$/, use: ['style-loader', 'css-loader']},
        ],
    }
}

  : file-loader과 옵션 설정이 비슷한 이유는 limit 보다 크면 file-loader가 처리하기 때문임

 

 

[참고] http://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html

[참고] https://joshua1988.github.io/webpack-guide/concepts/loader.html#loader%EA%B0%80-%ED%95%84%EC%9A%94%ED%95%9C-%EC%9D%B4%EC%9C%A0