Webpack이란?
여러 개의 assets (js, css, png, jpg)을 웹 브라우저가 이해할 수 있는 번들로 묶고 패킹할 수 있는 자바스크립트 모듈 번들러이다. Node.js 환경에서 실행되며, npm으로 설치할 수 있다.
기본적으로 자바스크립트 모듈 번들러(JavaScript Module Bundler)이며 웹 개발을 도와주는 엄청나게 많은 부가 기능을 가지고 있습니다.
웹팩을 사용하는 이유
각기 다른 자바스크립트를 로딩할 때, 스크립트 로딩 순서와 해당 HTML에서 필요하지 않은 js 파일들까지 로딩하여 리소스 낭비가 생김. 필요한 파일만 로딩하고 관리하고자 웹팩을 사용하게 됨.
요즘 웹 서비스를 하나 개발한다고 하면, 엄청난 양의 코드로 인해 많은 js파일이 생긴다. 양이 많아지는 만큼 js파일 관리가 힘들어지고, 하나하나 스크립트 선언해서 가져오게 되면 그만큼 자원도 엄청나게 소비되게 된다.
그래서 이 많은 양의 파일을 하나로 묶어줌으로써 자원 관리를 쉽게 해주는 기능을 하는 것이 웹팩(webpack)이다.
특히 리액트에서 하나의 컴포넌트마다 하나의 js파일을 생성하고, 뿐만 아니라 여러개의 수많은 이미지 파일, css파일 등등을 가지고 있는데, 이를 하나의 bundle.js 파일로 묶어줘서 웹 브라우저에 올림으로써 웹브라우저가 가지게 될 수고를 덜어준다.
왜 필요한가?
무엇보다 파일 간 dependency를 위해서 modern script에서는 import, export, require을 사용하는데, 브라우저가 이를 호환하지 않는다.
그래서 modern script 방식의 dependency를 브라우저에서 사용할 수 있도록 브라우저 방식에 맞게 하나의 js파일로 bunddling(묶음)하여 script src로 선언하는 것!
웹 서비스를 개발할 때마다 일일히 webpack 명령어를 쳐서 번들화 작업을 해 줄 수 없다.
그래서 webpack.config.js라는 파일을 이용해서 개발작업을 할 때마다 자동으로 번들화 시켜주도록 설정
출처
웹팩 핸드북 https://joshua1988.github.io/webpack-guide/motivation/why-webpack.html
https://velog.io/@decody/Webpack-%EC%84%A4%EC%A0%95
https://www.daleseo.com/webpack-basics/
https://www.daleseo.com/webpack-config/
https://helloinyong.tistory.com/75
https://helloinyong.tistory.com/81?category=832495
https://ithub.tistory.com/166
https://d2.naver.com/helloworld/0239818
https://365kim.tistory.com/35
