🔧Webpack : url-loader

  url-loader의 역할은 이미지를 base-64로 인코딩해서 문자열 형태로 이미지 소스에 넣는 역할을 한다. 이러한 처리를 url-loader가 자동으로 처리를 해준다. 사용하는 이미지가 많아질 때 네트워크에서 리소스를 사용하는 부담이 있고 서비스 성능에 영향을 줄 수 있기 떄문이다. 참고로 작은 이미지를 사용한다면 Data URI Scheme을 사용하는 것이 더 낫다.

---

file-loader : 2

  현재 작성작의 webpack 환경은 알다시피 webpack 5이다. 이에 따라 file-loader나 url-loader는 이미 assets/resource에 내장이 되어 있어서 수업에서 처럼 따로 설정 할 필요는 없다. 다만 webpack.config에 지난번과 같은 형식과 형태를 유지하지만 png를 제외한 나머지 포멧도 설정해야 하기에 아래와 같이 코드를 수정해주면 된다.

// webpack.config.js (5 버전 이상)

{
    test: /\.(png|jpg|gif|svg)$/,
    type: 'asset/resource',
    generator: {
      publicPath: './dist/',
      filename: 'assets/[name].[ext]?[hash]',
    },
}

  이전과 변경된게 있다면 우리가 hash값으로 변환이 된 파일을 확인하기 위해서 [name].[hash][ext] 이와 같이 작성을 했다. 하지만 이번엔 [name].[ext]?[hash]과 같이 작성을 했다. 이 둘의 차이는 아래와 같다.

• [name].[hash][ext] / 결과 파일 이름: example.1234567890abcdef.png
• [name].[ext]?[hash] / 결과 파일 이름: example.png?1234567890abcdef

각 요소들의 설명을 아래와 같다.

• [name]: 원본 파일의 이름을 의미합니다.
• [ext]: 원본 파일의 확장자를 의미합니다.
• [hash]: 파일 내용 기반으로 생성된 해시 값을 의미합니다.

  그렇다면 '?'는 무슨 의미인가 우선 쿼리 파라미터 형식 기법이지만 webpack 5이상부터는 이를 지원 하지 않아서 '?'부터 일절 무시를 한다. 이에 따라서 원본 파일명으로 dist 폴더에 저장이되는 것이다. 가기 두 형식으롤 build한 결과를 보면 아래와 같다.

[name].[hash][ext]

dist
├── assets
│   ├── git-logo-icon.e6cb70b6c44cc2e8835a.png
│   └── npm-icon.1c616bc0f7d12cf5f824.png
│  
└── main.js

[name].[ext][hash]

dist
├── assets
│   ├── git-logo-icon..pnge6cb70b6c44cc2e8835a
│   └── npm-icon..png1c616bc0f7d12cf5f824
│  
└── main.js

[name].[ext]?[hash]

dist
├── assets
│   ├── git-logo-icon.png
│   └── npm-icon.png
│  
└── main.js

---

중간 점검으로 나의 pcakge.json 파일을 살펴보면 file-loader, url-loader는 현재 없다. 물론 yarn install도 해주었다.

// package.json

  "devDependencies": {
    "webpack": "^5.75.0",
    "webpack-cli": "^4.10.0"
  },
  "dependencies": {
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1"
  }

 

 

마찬가지로 yarn run build를 해주면 잘 build 된 것을 볼 수가 있다.

---

url-loader

 수업에서는 webpack 5 이하 버전이라서 limit을 사용 할 수 있지만 webpack 5이상 부터는 전혀 다르게 이미지 크기 파일을 제한 할 수 있다. 아래와 비교해보면서 살펴보자.

// webpack.config.js (5 버전 이하)

 {
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'url-loader',
    options: {
    	publicPath: './dist/',
        name: '[name].[ext]?[hash]',
        limit: 2000, // 2KB
    }
},

// webpack.config.js (5 버전 이상)

  {
    test: /\.(png|jpg|gif|svg)$/,
    type: 'asset/resource',
    generator: {
      publicPath: './dist/',
      filename: 'assets/[name].[ext]?[hash]',
    },
    dependency: { not: ['url'] },
    parser: {
      dataUrlCondition: {
        maxSize: 20000, // 2KB
      },
    },
  }

위와 같이 설정하고 yarn run build를 하기 전 현재 나의 이미지 파일의 크기를 살펴보기 위해서 아래와 같이 명령어를 통해서 확인할 수 있다.

::CMD : ls -l src

-rw-r--r-- 1 rxxxxxxxx 197121    88  -월 17 21:21 app.css
-rw-r--r-- 1 rxxxxxxxx 197121   305  -월 19 01:15 app.js
drwxr-xr-x 1 rxxxxxxxx 197121     0  -월 17 20:11 css
-rw-r--r-- 1 rxxxxxxxx 197121  7040  -월 12 23:35 git-logo-icon.png
-rw-r--r-- 1 rxxxxxxxx 197121    47  -월 17 22:49 math.js
-rw-r--r-- 1 rxxxxxxxx 197121 32816  -월 24 18:35 npm-icon.png

이제 dist 폴더에 결과를 살펴보면 아래와 같다. 

dist
├── assets
│   └── npm-icon..png
│
├── e6cb70b6c44cc2e8835a.png
└── main.js

  브라우저의 결과는 인라인(assets)에 포함 되지 않은 모든 이미지를 렌더링 한다. 따라서 이를 제한 할 수 있는 방법 별도로 파일을 제한 할 수 있는 js파일을 만들어서 path.resolve를 통해서 해당 이미지를 걸러 낼 수 있는 방법이 있다.
참고로 'dependency: { not: ['url'] }' 설정은 URL 호출로 인해 발생한 애셋에 대해 file-loader 규칙을 적용하지 않는다. 즉, import 'https://example.com/image.png';와 같이 URL에서 가져오는 이미지는 이 로더 규칙의 적용을 받지 않는다.

(확인 중...) file-loader와 url-loader를 사용 하는 방식이다. webpack 5에서 asset/resoucre를 사용해서 이전 버전과 달리 url-loader와 file-loader를 따로 설정하지 않아도 되는 편리성은 있지만 현재 수업처럼 limit을 사용하기 위해선 아래 코드와 같이 적용을 하면 된다. 하지만 생각한 것과 다르게 잘 동작하지 않는 것을 확인 할 수 있다. 아마 file-loader 방식과 url-loader 방식의 차이가 있다. import 방식과 css에서 url로 호출 하는 방식의 차이가 있을 것이다.

  {
    test: /\.(png|jpg|gif|svg)$/i,
    type: 'asset/resource',
    generator: {
      publicPath: './dist/',
      filename: 'assets/[name].[ext]?[hash]',
    },
    dependency: { not: ['url'] },
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8192,
        },
      },
    ],
  },

 

 조금 더 분석해 볼 필요가 있다. url-loader와 file-loader의 차이를 좀 더 명확하게 살펴볼 필요가 있고 webpack 5에서 base-64로 인코딩 되는 것과 url로 처리할 수 있는 방법을 좀 더 찾아서 공부해볼 필요가 있다. 많이 아쉬운 부분 이지만 많은 시도로 대략적인 웹팩의 이미지처리 방식을 맛 볼 수 있었다.

---

REFERENCE

• https://webpack.kr/guides/asset-modules/
• https://velog.io/@tkdals0978/Webpack5-loader