유튜브 클론코딩[WEBPACK]

Introduction to Webpack

• Webpack은 모듈 번들러이다. 주요 목적은 브라우저에서 사용할 JavaScript 파일을 번들(bundle:묶음)로 묶는 것이지만 거의 모든 리소스나 asset을 변환, 번들링 또는 패키징할 수도 있다.
  https://webpack.js.org

• Wepback 설치
  npm i webpack webpack-cli -D

• Webpack 시작하기: https://webpack.kr/guides/getting-started/

• Webpack 설정: https://webpack.kr/concepts/configuration/

Webpack Configuration

• 클라이언트(브라우저)에서만 실행되는 코드를 작성한다. (위치: src/client/js/main.js)
  

• webpack.config.js 파일을 만든후 entry(input의 경로)와 path(output의 경로)를 설정한다.
  

  • entry: 이 프로퍼티에 우리가 처리하고자 하는 파일의 경로 입력

  • output: 결과물

  • filename: 결과물이 될 파일 이름 입력

  • path: 이 프로퍼티에 우리 결과물 파일을 어디에 저장할 지 지정 (단, 절대경로만 가능. 아래엔 상대경로로 했을때의 결과를 보여주기 위해 상대경로로 적음)

• package.json의 스크립트에 아래의 코드를 추가한다.
  

• npm run asstes으로 실행하면
  
  webpack.config.js파일의 path 부분이 절대경로가 아니어서 에러가 나온다.

• 아래 코드는 webpack 문서에 나와있는 예시 코드이다.
  __dirname과 path.resolve()가 뭔지 콘솔로 찍어보자.
  
  
  
  __dirname은 파일의 경로를 절대경로로 표시해주는 변수이고, path.resolve()는 첫번째 인수로 받은 경로 뒤에 두번재 인수로 받은 경로를 붙여주는 함수이다.

  상대경로인 path를 지우고 절대경로로 바꿔서 실행해보자.
  path: path.resolve(__dirname, "assets", "js")
  
  wetube 워크스페이스 밑에 assets폴더, 그 하위에 js폴더가 생기고 js폴더 안에 main.js파일이 생겼다.
  코드가 압축되어 나온걸 볼 수 있다.
  하지만 우리가 생각한 건, 버전 낮은 브라우저들도 이해할 수준으로의 변환이었는데 위의 코드는 단순 공백제거만 한것처럼 보인다.
  변환에 사용할 모듈을 설정하지 않아서 그렇다.
  webpack에서는 변환에 사용될 모듈을 로더(loader)라고 부른다.
  백엔드에서는 이 역할을 바벨이 했었다.
  프론트엔드에서도 바벨로더를 사용하면 변환이 가능하다.

• 로더와 관련된 webpack문서를 보자
  

• 위의 코드를 토대로 작성해보자.
  
  모든 js파일을 변환대상으로 삼기 위해 test필드에 정규식을 사용하였고, use에는 loader를 작성해야 한다. 바벨 로더 문서를 찾아보자.
  
  다른건 설치가 되었지만 babel-loader은 미설치 상태이니까 그것만 따로 설치한다.
  그 후, 위의 Usage를 참고해 복붙한다.
  
  실행해보면 아까와 다른 결과물이 나온다.
  
  콘솔창에 경고문이 뜨는데
  
  모드를 설정하지 않아서 뜨는 경고이다. 모드에는 development와 production모드 두 개가 있는데 설정하지 않으면 디폴트로 production모드가 설정된다.
  아직 개발단계니까 모드를 development로 설정하도록 한다.
  문서를 보자.
  
  모드를 설정하고 실행해보면
  
  아까와는 또 다른 결과물이 나온다.

• 이 js파일은 nodejs가 아니다.
  브라우저에서 실행되는 js파일이다.
  
  라우터에 url등록을 하지않아서 접근이 되지않는다.
  이전 uploads폴더와 같은 상황이다.
  라우터에 등록해준다.
  
  /static url에 접속하면 assets폴더와 매칭시켜준다.
  이럴 경우, 폴더 경로는 wetube/assets/js/main.js가 되지만,
  url은 localhost:4000/static/js/main.js가 된다.
  
  접속이 된다.
  js파일에 alert("hi")코드를 넣어서 base.pug에 넣어보자.
  먼저 client/js/main.js 파일에 alert("hi")를 입력하고, webpack 으로 변환 후,
  변환된 js파일을 base.pug파일에 입력해주면 된다.
  
  base파일의 body태그안 제일 하단에 위치시킨다.

• src의 값으로 상대경로가 아닌 이유는 script src를 사용하여 서버의 파일에 액세스할 수 없기 때문이다. static을 사용하여 노출된 파일에만 액세스할 수 있다.
  

SCSS Loader

• scss를 사용해서 css를 처리해보자.
  
  설치부터 한다.
  
  그 후, 위의 문서내용 대로 코드를 수행한다.

  1. js파일에서 scss파일 import

  2. scss파일에서 스타일 작성

  3. webpack.config.js파일 수정

• 먼저 js파일에 (여기서는 client/js/main.js가 된다.) import scss파일 을 한다.
  
  아직 scss파일을 만들지 않았으니, 파일을 만든다.
  위 코드대로 scss폴더를 만들고, 그 하위에 styles.scss파일과 _variables.scss 변수파일을 만든다.
  
  scss의 문서이다. 위 내용처럼 변수를 만들자.
  
  _variables.scss 파일에서 변수를 정의하고
  
  styles.scss 파일에서 변수파일을 import 한 후에, 스타일을 적용했다.
  
  모든 .scss 파일에 적용되도록 정규표현식을 수정했다.

• use에 사용되는 loader들은 순서가 마지막부터 시작된다. 즉 저기서 실행되는 순서는 아래와 같다.

  1. sass-loader

  2. css-loader

  3. style-loader

• 순서는 중요하다. 위와 다르게 하면 에러가 난다.
  위 로더들의 순서를 생각해 풀이해보면, 아래와 같다.

  1. sass파일을 css파일로 컴파일
  2. CSS를 CommonJS로 변환
  3. JS 문자열에서 'style' 노드 생성

• css-loader와 style-loader가 필요하니, 설치한다.
  
  
  실행해보면 에러 없이 잘 동작한다.
  브라우저에서 새로고침을 해본다.
  
  배경색이 바뀐 것을 볼 수 있다.

MiniCssExtractPlugin

• 만들때 js파일과 css파일을 분리해서 만들더라도
  
  webpack을 거치고 나면 js파일만 남는다.
  
  이는 결국 css가 포함된 js파일을 html에 넣는 것이므로 브라우저가 css파일을 불러오려면 필수적으로 js파일을 불러와야한다.
  보통 js파일은 body태그의 맨 하단에 위치시키는데 코드가 무겁다면 css파일을 불러오는게 늦어질 수도 있다.
  이를 방지하기 위해서 MiniCssExtractPlugin 이 있다.
  style-loader대신 이 플러그인의 로더를 이용하면 webpack을 한 뒤에도 css파일과 js파일이 분리되어 남는다.

• 먼저 설치부터 한다.
  
  그 후, 사용법에 따라 수정한다.
  
  css파일과 js파일이 분리되어 나온다.
  
  그런데 css파일은 css폴더에, js파일은 js폴더에 분리되어 나왔으면 한다. 그러기 위한 옵션이 존재한다.
  
  
  이제 만들어진 css파일을 pug에서 연결시켜주면 된다.
  
  
  잘 동작한다.

Better Developer Experience

• 프론트엔드에서 수정작업이 이루어지면 백엔드처럼 자동 실행되는 방법이 있다.
  
  true로 설정하면 된다.

• output을 하기 전에 이전 폴더와 파일을 정리하는 옵션으로 clean이 있다.
  
  webpack.config.js의 entry 대상이 된 파일을 수정하면 바로바로 재실행 된다.

  그런데 nodemon까지도 재실행된다.
  nodemon은 백엔드 부분이라 프론트엔드 부분을 수정한다해서 재실행이 되면 안된다.
  
  nodemon 문서에 보면 nodemon.json파일을 만들어서 ignore옵션을 사용하면 된다고 한다.
  
  nodemon.json파일 말고 package.json파일 내에 사용해도 된다.
  
  
  둘 다 잘 작동된다. 여기서는 첫 번째 방법으로 한다.

  nodemon.json은 nodemon 명령어를 실행하면 자동 참조하는 환경설정 파일이다.
  이곳에 실행할 파일을 설정할 수가 있다.
  exec 속성을 이용하면 된다.
  
  그러면 package.json 파일의 script속성이 좀 더 간단해 진다.
  

• assets 스크립트도 webpack으로 수정하여 사용할 수 있다.
  왜냐면 webpack명령어를 실행하면 기본적으로 webpack.config.js파일이 실행되기 때문이다.
  
  스크립트 이름을 명시적으로 백엔드와 프론트엔드로 구분지어 짓도록 하자.
  

• .ignore에 assets폴더를 넣자.
  
  우리는 파란부분을 수정하여 코드를 작성하고 웹팩을 이용해 빨간부분을 만들어 낸다.
  즉, 빨간부분은 깃허브에 업로드 할 필요가 없다.