html 에서 변수, 정적파일들 사용하고 빌드에 포함하기.

html에서 웹팩 변수와 정적 파일들(이미지)을 사용하고 이 녀석들까지 빌드에 포함시키자. (js, css에서 사용한 친구들처럼)

 

왜냐하면 html상에서 사용한 모든 에셋들도 빌드로 전부 같이 튀어나오는 것이 추후 배포 전략에서 편하기 때문이다.

 

(현재 우리 팀에서는 카카오 파일 서버를 쓰고 있는데, html과 js, css에서 바라보는 환경을 통일시킬 필요가 있었다.)

 

1. 설정에서 플러그인을 추가해준다.

  plugins: [
    new HtmlWebpackPlugin({
      // 기본 확장 템플릿
      template: './src/index.html',
      // 외부 호스팅 파일
      originPath: ASSET_PATH,
    }),
  ],

 

2. html에서 사용한다.

<link rel="icon" href="${require(`./images/favicon.ico`).default}" />
<script src="<%= htmlWebpackPlugin.options.originPath %>html5shiv/html5shiv.min.js"></script>

 

실행해보면 첫 번째 파비콘 파일은 빌드 타임에 다른 파일들처럼 같이 컴파일되어 나올 것이고,

두 번째 외부 호스팅 파일의 변수 부분은 치환되어 최종 html 파일이 생성된다.