Webpack

1. Webpack

 - 우리는 babeljs를 사용하여 백엔드에서 자바스크립트를 최신 코드로 사용하고 있고 최신 코드를 컴파일하고 있음

 - 나중에 Sassy CSS도 사용할 건데 이 파일 또한 그대로 둔다면 브라우저는 이해하지 못함

   - .scss를 .css로 바꿔줄 필요가 있다는 것

 - 프론트엔드에서 자바스크립트 코드를 작성하면 모든 브라우저에서 인식 가능한 자바스크립트로 바꿔주는 무언가가 필요함

 - https://webpack.kr/

webpack

 npm i webpack webpack-cli -D

 - webpack은 우리 파일을 바꿔줄거임

 - 우리가 webpack에게 할 말은 여기에 소스파일들이 있으니 여기가 네(webpack)가 결과물을 보낼 폴더라고 말해 주는 것

 - 우선 프로젝트 최상단에 webpack.config.js 파일, src에 client폴더를 만들어줌

 - client 폴더 안에 있는 코드들은 다 서버가 아니라 브라우저에서 실행 됨

 - webpack.config.js 파일은 굉장히 오래된 자바스크립트 코드만 이해함

   - webpack이 읽을 configuration 파일을 내보냄

 - configuration 개체에는 entry와 output이라는 필수요건의 특성이 있음

   - entry에는 우리가 변경하고자 하는 파일들이 들어감

     - 즉 우리가 사용한 최신 자바스크립트 코드를 말함

   - 최신 코드가 구버전의 코드로 변경이 되면 output에 저장

 - 에러가 발생하는데 output 경로는 절대경로여야 한다고 나옴 

2. rules 작성

 - 결국 webpack이 폴더로 접근할 수 있는 경로를 전부 나열해야 된다는 것

 - 그걸 해결하기 위해 API에 나와있는 path.resolve 사용

 - webpack.config.js에 console.log(__dirname)을 해보면

   - directory name으로 파일까지의 경로 전체를 말해줌

 - path.resolove는 결국 경로를 만들어 주는 것

 - 이렇게 하고 npm run assets을 하니 폴더가 생성

왼쪽이 최신 코드 오른쪽이 webpack을 사용하여 변환된 구버전 코드

 

 - 제대로 작동하고 있지만 어떤 코드들은 브라우저가 여전히 이해할 수 없는 것도 존재

   - 코드에 호환성을 추가

 - 하지만 여전이 mode 옵션이 설정이 안되었다며 경고 발생

 - 1번에서도 말했지만 우린 babeljs라는 컴파일러를 백엔드에서 사용중임

 - 프론트엔드에서도 babel을 이용할 수 있지만 package.json에서는 할 수 없음

   - 당연하게도 webpack.config.js에서 해야함

 - 그전에 rules라는 컨셉을 이해해야 함

 - rules는 우리가 각각의 파일 종류에 따라 어떤 전환을 할 건지 결정

css파일을 위한 rules 사용방법

 - 번역하면 rules에 의하면 모든 css 파일들을 가져다가 use에 나와있는 방법으로 변환들을 적용시킴

   - use에 있는 것들을 webpack 용어로 loader

   - 어떤 파일을 가지고 있던지 loader를 찾으면 됨

   - 우리의 경우 babel-loader

 - 결국 webpack은 loader를 통해 전환

   - API의 경우 css-loader랑 style-loader를 사용해서 css 파일들을 변환

   - 우리의 경우 css를 하는게 아니라 자바스크립트이며 babel-loader가 필요

 - rules를 보면 모든 자바스크립트 파일을 가져다가 몇가지를 변환

 - babel-loader도 설치하고나서 위 코드대로 작성

 - npm run을 해보면 이전과는 달라지지 않은 구버전 코드가 변환되어 있음

   - 이제 대부분의 브라우저가 async await을 지원하게 되어, 정말 과거의 자바스크립트로의 변환은 안한다는 것

 - 하지만 아직 mode 경고를 해결하지 못함

 - 대충 보면 webpack한테 이 코드가 개발중인지 완성품인지 알려줘야 함

   - 일단 개발중이라고 알려주고 배포할때 수정

   - 기본 설정은 완성품임

 - 뭐가 잘된건지 모르겠지만 아무튼 이전과는 다르게 나오고 주석에 설명도 있음

   - 완성되면 완성품이라고 바꿔주라고 또 말해줌 

3. 프론트엔드 적용

 - 새로만든 client 폴더가 프론트엔드를 꾸며줄 장소임

 - assets 폴더는 브라우저가 접근해서 볼 폴더임

 - 하지만 서버를 켜고 /assets/js/main.js에 가도 Cannot GET 에러만 발생함

   - 뻔할 뻔자겠지만 우린 express에게 알려주지 않았음

 - uploads  폴더를 만들때와 똑같은걸 해야함

 - 좀전 경로로 이동하니 webpack으로 변환된 페이지가 잘 나옴

 - 이제 해야 하는 것은 client 폴더의 코드들이 잘 작동하는지 확인해야 함

 - assets/js/main.js를 base.pug과 연결

 - 알림이 홈에 가자마자 바로 뜸

 - base.pug이 main.js를 처리하며 생산된 결과물을 불러오고 있음

 - 당연하겠지만 우린 최신 코드로 예쁘게 만들고 그걸 assets으로 보내 개구린 코드로 바뀐 main.js를 pug이 불러오는 흐름

 - 뭔말인지 모를만 하지만 그냥 우린 여전히 ES6를 사용하고 호환성을 위해 webpack을 사용하는 것일뿐

   - 다시말하지만 우리가 base.pug에 달아놓은 script는 node.js가 아니고 브라우저를 위한 코드임