css 번들링 (2) 썸네일형 리스트형 [Webpack] CSS 파일 메인 번들과 분리시키기 (MiniCssExtractPlugin) Intro. style-loader를 통한 css번들링의 단점은, css 규칙이 메인 번들에 포함된다는 점입니다. 즉, 가만 납두면 번들 하나의 사이즈가 매우 커진다는 의미지요. 게다가 css의 주입이 런타임에 일어나는 것 또한 문제입니다. 개발환경에선 상관 없을지도 모르겠으나, 배포용 환경에선 문제가 많을 것 같습니다. 일단 번들 하나의 사이즈가 커진다면, 당연히 그만큼 다운로드 받는데 오래걸릴테고 이는 곧 UX저하로 이어지겠지요. 따라서 적어도 스크립트와 CSS는 분리하여 번들링하는게 좋을 듯 합니다. Goal Before after Method 1. mini-css-extract-plugin을 설치합니다. yarn add -D mini-css-extract-plugin 2. config파일에 c.. [Webpack] CSS 번들링하기 Intro. 웹팩이 JS , JSON파일들을 번들링해줌으로써, 상당히 많은 문제들이 해결됬습니다. 다만, 이왕 번들링한거 CSS도 같이 번들링 했으면 좋겠습니다. 다만, 웹팩은 기본적으로 JS,JSON밖에 번들링 할 줄 모르기에, 추가적인 셋팅을 해주어야합니다. Goal /* Before */ /* After */ Method 1. JS 파일에, CSS파일을 import 합니다. // [entryfile].js import '../css/index.css'; ... 2. 웹팩에 CSS파일 관련 loader를 받습니다.(style-loader , css-loader) yarn add -D style-loader css-loader css-loader는 웹팩에 CSS파일을 디스크로부터 읽는 법을, sty.. 이전 1 다음
