Module
자바스크립트로 개발을 하다보면 코드의 재사용이나 유지보수를 위해서 파일을 여러개로 나눠서 개발을 하게 된다.
이렇게 분리된 파일들을 모듈이라고 하는데, 이렇게 모듈로 파일들을 분리해놓으면 재사용하기에 용이하므로 모듈로 개발을 많이하게 된다.
이렇게 웹애플리케이션이 완성되면 우리는 웹서버에 배포를 하고 사용자들이 브라우저로 접근을 하면 브라우저는 웹 서버에서 자원들을 가지고 사용자들에게 UI를 제공한다.
하지만 개발 편의성을 위해 모듈들을 계속 해서 나누게 되면 브라우저가 웹 서버에 요청하는 파일들의 갯수가 늘어나고 이러한 네트워크 비용의 증가는 페이지로딩 시간을 길어지게 하므로 ux가 안좋아질 수 있다.
우리가 웹 앱을 만들고, 웹 서버에 배포하기 전에 하나의 파일로 묶어서 올림으로써 이러한 점을 방지할 수 있다. 이러한 행동을 번들링이라고 하며, 번들링을 해주는 도구를 모듈 번들러이다.
웹팩은 이러한 모듈 번들러의 하나이다.
웹팩 사용 방법
설치하기
npm i --save-dev webpack webpack-cli실행하기
npx webpack --entry ./src/index.js --output-path ./dist번들링을 할 진입점을 정해주고 (./src/index.js)
/dist라는 폴더에 output을 지정해준다.
그러면 dist라는 폴더에 main.js라는 압축된 파일이 생성된다.
실행명령어 뒤에 --mode develope을 추가하면 압축이 안된 파일이 출력이 된다.
webpack은 webpack.config.js 파일의 옵션을 참조하며, 이안에서 entry, output, filename 등을 설정할 수 있으며 옵션이 잘설정되었다면
npx webpack만으로도 번들링된 하나의 파일로 만들 수 있다.
script에서 "build" : webpack 와 같이 추가함으로써 쉽게 사용할 수도 있다.
