WebpackConfig 관련 트러블 슈팅

박진형·2021년 6월 2일
0

Web

목록 보기
7/8

webpack.config.js 파일에는 다양한 옵션이 있다.

라우터 경로를 올바르게 인식하지 못하는 문제

/picker 나 /calendar와 같은 경로까지는 잘 들어가지지만
/board/write와 같은 경로는 어떤 이유에서인지 잘 들어가지지 않는 문제가 있었다.
페이지 내부에서 link to 로 /board를 거쳐 /board/write로 들어가지기는 하지만 주소창에 /board/write를 입력해서 들어가려고하면 해당 페이지를 찾지 못하는 문제가 발생했다.
또한 /board 는 들어가지지만 /board/ 는 페이지를 찾지못해 들어가지지 않는 문제도 발생했다.

해당 문제는
nested url routing using react-router and webpack dev server 를 참고하여 publicPath 설정을 통해 해결했다.

Cache Busting

프로필 사진을 변경시 남아있는 이미지 캐시 때문에 사용자에게 변경된 프로필사진이 보이지 않고 이전의 프로필 사진이 보여지는 문제가 발생했다.
이를 해결하기 위해서 몇가지 방법이있는데

1. 타임스탬프 방식

<img src="userProfile/${user_PK}.jpg?${new Date()}"/> 와 같이 사진 경로의 뒷부분에 의미 없는 타임 스탬프를 추가하여 매번 새로운 이미지로 인식하게 만드는 방법이 있다.

이 방법은 매번 불필요하게 이미지를 다시 로드해 오기때문에 부하가 과도하게 발생할 수 있을 것 같다.

2. Webpack 설정의 hash를 이용하는 방식

output의 filename에 hash를 붙여주면, 파일이 변경될때마다 파일 이름 뒤에 붙은 hash 값이 변경되고, 브라우저에서 파일이 변경되었다는 것으로 인식하고 새로운 파일을 받아 화면에 보여준다.
이렇게 하면 변경된 파일에 대해서만 새로 갱신하니까 첫번째 방식보다는 부하가 적을것 같다.

참고 링크 [Web] Cache Busting으로 Cache 문제 해결하기

Favicon

Webpack 상에서 Favicon을 적용하려면
webpack.config.js 에서

plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './public/index.html'),
      favicon: path.join(__dirname, './src/Images/logo.ico'),
    
        }),
      ],
    };

위와 같이 설정해주면 된다.

WebPack 이미지 관련 오류

기존에 <img src={'public/Images/Tiers/' + tier + '.svg'} /> 와 같이 이미지 경로를 설정 했을 시 webpack을 이용해 build를 했을때 이미지는 build되지 않아 배포 환경에서는 이미지를 불러오지 못하는 문제가 발생했다.
이를 해결하기 위해서 react 코드내에서 아래와 같이 이미지를 import 시키고 build하면 제대로 이미지까지 build 되었다.

import Tier1 from 'Images/Tiers/1.svg';
import Tier2 from 'Images/Tiers/2.svg';
import Tier3 from 'Images/Tiers/3.svg';
  const getTier = (tier) => {
    switch (tier) {
      case 1: {
        return Tier1;
      }
      case 2:
        return Tier2;
      case 3:
        return Tier3;
      }
   }
<img src={getTier(tier)} />

1개의 댓글

comment-user-thumbnail
2021년 6월 4일

웹팩 고수의 길로 가시군요..

답글 달기