Webpack 은
여러 개의 assets (js, css, png, jpg) 을 웹 브라우저가 이해할 수 있는 번들로 묶고 패킹할 수 있는 자바스크립트 모듈 번들러.
Node.js 환경에서 실행되며, npm으로 설치할 수 있다.
사용하는 이유
각기 다른 자바스크립트를 로딩할 때, 스크립트 로딩 순서와 해당 HTML에서 필요하지 않은 js 파일들까지 로딩하여 리소스 낭비가 생긴다. 필요한 파일만 로딩하고 관리하고자 웹팩을 사용하게 되었다.
웹팩에서 모듈은 HTML, CSS, JavaScript, Images, Font 등등을 모두 포함.
요소 하나하나가 모듈인 셈이다.
웹을 만들다보면 이러한 모듈들이 수십개에서 큰 프로젝트라면 수백개가 생성될 수 있는데,
이 수많은 요소들을 하나의 파일로 합쳐주고 압축시켜 주는 역할을 한다.
이렇게 압축시켜주는 '모듈 번들러' 라고 한다.
더 자세한 설명과 웹팩 생성, 설정하는 방법은 참고사이트를 참고하길 바란다.
참고사이트
https://velog.io/@decody/Webpack-%EC%84%A4%EC%A0%95
Webpack 시작하기
webpack은 여러 개의 assets (js, css, png, jpg)을 웹 브라우저가 이해할 수 있는 번들로 묶고 패킹할 수 있는 자바스크립트 모듈 번들러이다. Node.js 환경에서 실행되며, npm으로 설치할 수 있다. 웹팩을
velog.io
https://haerim95.tistory.com/7
[React.js] Webpack 설치해보기
제로초님의 React 기본강좌 webgame 만들기 강의를 들으면서 웹팩 설치 관련 내용을 정리한 글입니다. 문제가 생길시 글 내리겠습니다 :) 웹팩이란? 🤔 최신 프론트엔드 프레임워크에서 가장많이
haerim95.tistory.com