Webpack Loader

1. SCSS Loader

 - 이전글(webpack)에서는 예쁜 코드를 짜고 그걸 구린 코드로 변환해봤음

 - 그 구린 코드는 브라우저에서 잘 작동할 거임

 - 이 상태로 webpack을 실행시키면 에러가 발생

   - 이 파일로 뭘할지 모르겠다는 뜻

 - 당연하게도 scss를 위한 rules를 만들어야 함

 - loader는 객체를 사용할 수도 있지만, 여러 loader들을 가져와서 한가지의 변형으로 만들 수도 있음

   - 첫번째로는 이상하게 생긴 scss를 가져다가 일반적인 css로 바꾸는 것(sass-loader)

   - 두번째로는 폰트같은걸 불러올 때 css에 유용한 것(css-loader)

   - 세번째로는 바뀐 css를 우리 웹사이트로 불러오는 것(style-loader)

 - 이제 API 링크는 걸지 않고 설치도 알아서들 진행

 - use에 순서를 역순으로 적어야함

   - webpack은 기똥차게도 뭔 개짓거린지 모르겠지만 뒤에서부터 시작하기 때문

 - webpack을 실행하면 어떤 결과가 나와야할지 생각해 봐야함

   - 제일 먼저 webpack은 우리 entry 파일을 가져오고, webpack은 자바스크립트라는걸 인식해서 babel을 이용해 변환

   - 그 후 webpack은 이게 scss 파일이라는걸 인식해서 일반 css 파일로 변환

   - 그리고 그 webpack이 직접 어떤 자바스크립트 코드를 짜는데, 그 자바스크립트 코드가 웹사이트에 컴파일된 css를 입력하는 역할을 함

   - 그래서 최종 자바스크립트 파일에 새로운 코드들을 볼 수 있는데, 그 코드가 컴파일된 css를 어떤 방식으로 우리 웹사이트에 적용시킴

 - 서버를 켜고 홈페이지를 가보면 배경색이 바뀐걸 확인할 수 있음

 - 하지만 약간의 문제점이 있음

2. MiniCssExtractPlugin

 - 사실 이제 더이상 style-loader를 안쓰고 css-loader와 style-loader를 합칠거임

 - 우리는 자바스크립트에 css를 넣지 않고 분리시키고 싶음

   - 자바스크립트가 로딩되는걸 기다리지 않고 바로 띄우고 싶음

   - base에 mvpcss를 넣었던 것과 비슷

 - 그걸 위해 MiniCssExtractPlugin를 사용

   - 역시나 API의 설치 순서를 따라가면 됨

 - 신기하게도 main.css로 파일이 분리됨

 - 하지만 css 파일이 js 파일과 같은 경로에 생기므로, output에서 filename은 그대로 두고, path를 수정

 - 용도에 맞게 폴더와 파일이 잘 생성되었음

 - 이제 css 파일을 추출해봐야 함

 - 기똥차게 배경색이 바뀐 것을 확인하였음

 - 남은건 webpack을 실행하기전에 assets 폴더를 자동으로 없애는 것

 

3. 개발환경 개선

 - nodemon 패키지 같은게 몹시 고픈 상태

 - webpack.config.js에 watch function을 사용

   - 배포를 하게되면 deploy로 해야함

 - webpack을 실행해도 끝나지 않고 서버처럼 계속 켜져있음

   - 저장하면 새로고침이 자동적으로 됨

 - 하지만 중요한 것은 가끔 서버만 실행하거나, 혹은 webpack만 실행할 때가 있는데 그럼 안되고 항상 같이 실행해야함

 - clean은 output에 등록되지 않은 폴더가 있으면 webpack이 실행되기 전에 지워줌

 - 그리고 프론트엔드의 자바스크립트 코드가 변경된다고 해서 백엔드가 다시 재시작하기를 원치 않음

 - webpack.config.js도 이상하게 저장하면 nodemon이 서버를 재시작함

 - nodemon에게 해당되지 않는 것들을 알려줄 필요가 있음

 - package.json을 설정하거나 설정파일을 하나 생성하는 두가지 방법이 있음

 - nodemon.json을 생성

 - ignore로 지정한 곳에서 저장을 해도 서버가 재시작을 하지 않음

 - https://github.com/Daniel-Jeon/wetube-loaded/commit/ccb9d622fe43b49ddcd0eb8b1af0a2d112152e24

complete webpack · Daniel-Jeon/wetube-loaded@ccb9d62