Webpack (feat. 모듈, 모듈번들러)
Webpack
모듈
자바스크립트로 개발하다보면 코드의 재사용이나 유지보수 측면에서 파일을 여러개로 분리해서 개발하곤 한다.
이렇게 분리된 파일을 “모듈“ 이라고 한다
코드를 모듈로 분리하게 되면 이러한 모듈을 필요한 어떤 곳에서든 재사용이 가능하다.
자주 사용하는 코드는 모듈로 분리해서 개발하는 것이다.
이랗게 웹앱이 완성이 되면 웹서버에 배포를 하게 되고 사용자들이 웹서버를 통해서 브라우저에 접근을 하게 되면브라우저는 사용자에게 유아이를 보여주기위해 웹서버에 HTML CSS Font같은 자원을 요청하게 되고 웹서버는 요청받은 자원에 응답하으로써 사용자들이 유아이를 볼 수 있게됨
하지만 개발편의성을 위해 모듈을 계속 분리하다보면 그만큼 브라우저에서 서버에 요청하는 개수가 많아지고, 이러한 네트워크 비용의 증가는페이지 로딩 시간을 길어지게 하므로써 사용자 경험을 좋지 않게 만든다.
개발 편의를 위해 모듈을 분리해서 개발을 하고 또 페이지 로딩시간을 줄아는 방법이 없을까??
그 방법은 바로 브라우저에서 서버로 요청하는 http 개수를 줄이는 것이다 → bundle.js
개발을 할 때는 모듈로 나눠서 개발을 하고 웹서버에 배포하기 전에는 하나의 파일로 묶어서 배포를 하는것이다.
그러면 그만큼 서버로 요청하는개수가 줄어들기 때문에 사용자 경험을 향상시킬수있다.
이렇게 하나로 묶는 작업을 “번들링”이라고 하고, 이러한 도구를 “모듈 번들러”라고 한다.
모듈 번들러의 종류는 다양하지만 그중에서 프론트엔드에서 가장 인기 있는 것은
웹팩(Webpack)이라는 것이다.
웹팩(Webpack)
웹팩은 여러개의 파일을 하나로 묶어주는 모듈 번들러라고 할 수 있다.
모듈이 많아지다보면 비효율적이다. 타이밍 탭에서 확인해보면 불필요한 시간이 많이 소요된다.
따라서 하나의 컨텐츠로 가져올 수 있다면 붎필요하게 낭비되는 시간을 줄일 수 있다.
웹팩을 사용해 여러개 모듈을 하나로 묶어서 http요소들을 줄여보자!
우선 src폴더를 만들어준 뒤에 여러개의 모듈들을 하나의 폴더로 묶어준다.
src에서 index.js를 생성한 뒤 index.html에 연결을 시켜준다.
npm init -y를 사용하여 package.json을 생성하고 npm install —save-dev webpack webpack-cli를 설치해준다.
npx webpack —entry
entry: webpack의 진입점. 어떠한 파일을 기준으로 번들링을 할것인가?
./src/index.js 파일 지정해준다. → 총 5개의 파일이 번들링됨
—output-path ./dist : 아웃풋 설정 dist 디렉토리를 생성후 안에 번들링할 파일을 위차하도록 함
그러면 main.js이 생성이 되고, 번들링을 할 때 기본적으로 프로덕션이 적용되어있기 때문에 압축된 코스형식으로 담겨져있다.
webpack.config.js파일을 생성 후
const path = require('path');
module.exports = {
entry:"./src/index.js",
output:{ path.resolve(__dirname, "dist"),
filename:"bundle.js",
},
};
npx webpack //실행dist / bundle.js파일 생성이 됨
mode도 설정이 가능!
main.js → bundle.js로 변경해서 설정해준다.
bundling은 자주 사용하기 때문에 build 명령어로 설정해준다.
npm run build위 명령어 설정시 자동으로 번들링 해준다.
