웹팩 관련 간략 정리..

Why use wepack ?

우리는 최신 프레임워크에서 또는 자바스크립트 코드를 작성 시 많이도 ..
js파일을 분리하여 모듈단위로 작성 및 작업을 하게 되는데... (a.js, b.js, c.js, ... n.js)
브라우저가 이 분산된 많은 자원들을 불러올 때..
이러한 파일자원을 받아오는데에 네트워크요청이 많아져서 응답이 늦어지게 될 수도 있다..
비단 js모듈 뿐만 아니라 HTML, CSS, image등도 포함해서..

What is webpack ?

이를 하나의 결과물로 번들링을 도와주는 도구가 웹팩

What is bundling ?

번들링 : 위의 HTML, CSS, image, js 등 웹 애플리케이션을 구성하는 몇십 몇백개의 자원들을 하나의 파일로
병합 및 압축해주는 동작

// 운영환경에서 사용할 일이 없기에 dev의존성으로 웹팩과 웹팩 cli를 설치
npm i -D webpack webpack-cli

// package.json로 프로젝트를 관리 할 수 있게 초기화
npm init -y

// 해당 프로젝트 경로에서 번들링 실행1
npx weback --entry ./src/index.js --output-path ./dist
-> main.js생성

// 해당 프로젝트 경로에서 번들링 실행2 (개발 테스트용도)
npx weback --entry ./src/index.js --output-path ./dist --mode development
-> 병합된 파일을 개발자(사람)의 눈으로 가독성있게 개행 형식으로 압축해줌

웹팩은 실행시 자동으로 webpack.config.js를 참조함

프로젝트에서 webpack.config.js 생성 (기본 베이스코드)

웹팩 공식 참조

npm run webpack
//또는 package.json scrips 명령어를 추가 "build" : "weback"
npm run build

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

결론

• 결과물을 압축해줘서 네트워크 요청을 줄여줌으로 퍼포먼스가 증가 (사용자 경험이 좋아짐)
• 결과물이 최대한 압축(공백, 개행 등..) 리소스를 최적화

그래서 실제 배포는 하나의 결과물로 번들링된 파일을 배포하면 된다..