webpack-manifest-plugin 을 활용해보자

webpack-manifest-plugin 는 웹팩을 사용할때 유용하게 활용하는 플러그인중 하나입니다

 

웹팩을 통해 번들링 된 파일은 고정된 특정 파일명으로도 생성이 가능하지만,

 

번들링의 해시를 넣어 유니크한 이름으로 만들수도 있습니다.

 

그런데 매번 내용 변경이 있을때 새롭게 만들어진 에셋이 최종적으로 무슨 파일명으로 만들어졌는지 알아야

 

우리가 html파일에 해당 js나 css파일을 해당 경로로 추가하지 않겠어요?

 

그래서 이 플러그인은 애셋의 매니페스트 파일을 만들어냅니다

 

 

이런식으로 웹팩설정에 플러그인을 적용합니다

 

{
  "dist/batman.js": "dist/batman.1234567890.js",
  "dist/joker.js": "dist/joker.0987654321.js"
}

 

번들링이 끝나면 지정된 경로 manifest.json 파일이 생기는데요

 

번들링을 통해 생성된 파일들의 정보가 manifest.json 파일에 기록됩니다

 

그래서 우리는 이 json 파일을 읽어 어떠한 파일이 어떠한 이름으로 최종적으로 번들링되어 파일이 생성되었는지 알 수 있어요

 

 

참고

 

webpack-manifest-plugin은 publicPath 라는 옵션이 있는데,

 

이 옵션값을 아무것도 설정하지 않는 경우에는 웹팩의 publicPath option값을 따라갑니다

 

그런데 웹팩의 publicPath의 기본값은 "auto" 라는 string 이기때문에

 

여러분이 이 플러그인을 사용했을때 최종번들링 정보가 담긴 manifest.json 파일의 경로에 auto라는 글자가 포함되어있다면

 

바로 이러한 이유 때문입니다.

 

이럴때는 플러그인의 옵션에서 명시적으로 publicPath를 원하는 값으로 지정해주시면 됩니다