웹팩

웹팩 ?

하나의 웹서비스를 구성하는 모든 파일들 (html 제외) ( css ,js ,image 들을 각각의 모듈로 본다) 을 해석한다음 
그 파일들을 하나의 파일로 합쳐줌(모듈 번들링)
이것이 바로 웹팩.

---

웹팩 사용 전

웹팩 사용 전

 

무수히 많은 파일들을 요청하고 응답한다.
수백개의 파일들이 있다면 느릴 것이고, 지구 반대편에서 요청을하면 더 더욱 응답이 느릴 것이다.

---

웹팩 사용 후

웹팩 사용 후

파일들을 하나의 파일에 합쳐준다. 이것을 모듈 번들링이라고 한다.

페이지 로딩속도가 빨라질 것이다.

 

---

loader 로더가 무엇일까?

js가 아닌 파일들에 대해서 ( CSS, Images, 폰트 등)
웹팩안에서 합쳐(번들링) 줄 수 있게 적용해주는 속성,

(css 로더를 적용한 상태에서 웹팩 build를 하면 빌드 결과물에 css 코드가 포함)

쉽게말하면, 웹팩 내부에서 js가 아닌 파일들을 인식 할 수 있게 해주는 것이 바로 loader 
그래서 js 파일에서 import 해서 사용가능한것.

로더는 오른쪽에서 왼쪽으로 해석이된다 (순서중요)

웹팩 빌드 과정

 

---

핫리로딩?

현재 페이지에서 아무거나 바꿀때 마다, 웹팩을 다시 실행해주어야한다 .

즉,
바꿀때마다 npm run build 를 해주어야한다 .

그 귀찮음을 방지해주기 위해서 

"webpack-dev-server": "^4.0.0"

- 프록시 서버의 역할도 해준다.

- 핫 리로딩

 

핫 리로딩을 하려면

ReactRefreshWebpackPlugin  을 npm i 하자

 

webpack.config.ts 에서 import

import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';

 

webpack-dev-server

SPA 싱글페이지 애플리케이션은 페이지가 하나다 index.html

historyApiFallback : true

존재하기 때문에  없는 주소를 진짜 있는 주소마냥 사용하기 가능.

페이지 이동하는 것 처럼보임 원래는 계속 

localhost:3060에 머물러있음. 

---

참고
https://www.youtube.com/watch?v=WQue1AN93YU