mini-css-extract-plugin과 style-loader를 같은 개발환경에서 함께 쓰면 안 되는 이유

HoJeong Im·2022년 1월 19일
0

Error Note

목록 보기
4/10
  • 저도 이거 때문에 고생 좀 했는데, 조금 읽어보니 공식 문서에 있네요 ㅠㅠ

참고 링크

why?

  • Production 환경과 development 환경에서의 사용 목적이 다르기 때문

  • Production에서는 나중에 CSS/JS의 병렬 로드를 사용하도록 bundle에서 CSS를 추출하는 것이 좋음

    	- 이 작업을 `mini-css-extract-plugin`이 해줌 => css 파일로 만들어줌
  • development 환경에선 (webpack-dev-server를 포함한) style-loader를 사용하면 됨

    	- CSS를 여러 개 DOM에 삽입하고 더 빠르게 작동하기 때문 
  • 삼항 연산자를 통해 개발 환경에 따른 환경 변수를 사용해서 어떠한 loader를 사용할 지 정해주고 사용하면 좋음!

const devMode = process.env.NODE_ENV !== "production";

devMode ? "style-loader" : MiniCssExtractPlugin.loader,
profile
꾸준함이 제일 빠른 길이었다

0개의 댓글