자주 사용하는 로더

 css-loader

 

css 로더를 사용하게 되면 자바스크립트에서 css파일을 모듈로 불러올 수 있다. 즉 css파일을 읽어서 자바스크립트 코드 로 가져올 수 있는 것이다.  

 

먼저 app.css 파일을 하나 만든 뒤에 body에 백그라운드만 아쿠아로 설정 해준 뒤에 app.js 파일로 가서 임포트를 해준 뒤에 웹팩을 돌려보면 아래와 같은 에러가 뜬다. 웹팩은 알다시피 모든 파일을 모듈로서 해석하는데 css파일코드를 자바스크립트 코드로 파싱하는데 에러가 생겼다고 한다. 

 

이렇게 css 파일을 파싱해주는게 바로 css-loader 로서 우선 설치해준다.

npm install css-loader

webpack.config 파일로 가서 

 

요론 식으로 설정해주면 되겠다. 그리고 빌드 된 main.js 파일에서 찾아보면 

 

요렇게 제대로 들어가 있는 것을 확인 할 수 있다. 

 

이제 브라우저로 백그라운드가 바뀌었는지 확인을 해보면 전혀 바뀌지 않은 것을 확인 할 수 있다. 

html 코드가 dom 객체로 변환되어야 브라우저에서 확인 할 수 있듯이  css 코드도 css 객체인 CSS 객체모델 인 CSSOM 형태로 바뀌어야 브라우저에서 모습을 드러낸다. 그렇게 하려면 html코드에서 스타일 태그로 불러오거나 인라인 형식으로 코드를 넣어줘야 되는데 아직 그 작업을 하지 않고 자바스크립트 코드로만 남겨두었기 때문에 보이지 않는 것이다. 

 

그래서 css-loader 와 같이 나온 것이 style-loader 이다. 자바스크립트로 나온 css 스타일 코드를 html 에 넣어주는 역할을 한다. 

 

 

npm install style-loader

 

 

후에 

 

 

 

설정 해준 뒤에 다시 웹팩돌리고 브라우저를 확인해보면 

 

제대로 바뀐 것을 확인 할 수 있다.