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

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

참고 링크

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,