728x90
Webpack은
- 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러다.
- 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.
- 여러 파일을 하나 이상의 파일로 합쳐주는 자바스크립트 번들러다.
- 모듈(module): 프로그램을 구성하는 구성 요소로, 관련된 데이터와 함수를 하나로 묶은 단위
그럼 Webpack을 왜 사용해야 할까 ?
- 옛날에는 페이지마다 새로운 html을 요청해서뿌려 주는 방식이였다면, 요새는 SPA 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함한다. 연관 되어 있는 자바스크립트 종송석 있는 파일들을 하나의 파일로 묶어줘서 관리하기 편하다.
- 파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸린다. 그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다.
- 하나의 자바스크립트 파일로 만들어서 웹페이지 성능 최적화 해준다.
next에서 svg를 추가하려고 했는데, 오류가 났다.
next에 기본 webpack 세팅은 있겠지만, svg는 없나보다. 추가해주자.
(아직 부족해서 더 채울 예정)
참고
https://codermun-log.tistory.com/436