Webpack ?

Webpack은 여러 모듈을 하나로 번들링 해주는 번들러 (bundler)

웹팩을 사용하는 이유 ?

• 자바스크립트의 종속성이 있는 파일을 하나로 묶어주어 관리하기 쉬움
• 모듈이 커지면 파일을 읽어 오는 로딩 시간이 늘어남 웹팩을 사용하면 하나의 파일로 번들링되어 로딩 시간이 최적화됨
• 하나의 파일로 번들링 되기 때문에 웹페이지 성능이 최적화 됨

Webpack 사용해보기

웹팩 설치하기

npm install --save-dev webpack webpack-cli

webpack.confing.js 파일 기본 설정 하기

• mode : 웹팩의 실행 모드가 설정
  • 🔗 Mode 공식 문서
  • none : 모드 설정 안함
  • development : 개발 모드
  • production : 배포 모드
  • 모드의 기본 값을 설정하지 않으면 production 모드로 자동 설정됩니다.
• entry : 웹 자원을 변환하기 위해 필요한 최초 진입점이자 자바스크립트 파일 경로 dependency graph를(모듈 간의 의존 관계가 생기는 구조) 그릴 때 시작점
  • 🔗 entry 공식 문서
  • entry 속성에 파일 경로를 배열로 전달 가능
• output : 팩이 만드는 번들을 어디에 만들고 이름을 무엇으로 할 것인지 정의
  • 🔗 output 공식문서
  • path : 번들 파일 경로
  • filename : 번들 파일명
• target : 지원하길 원하는 환경을 설정
  • 🔗 target 공식문서
  • target를 설정하지 않으면 기본값으로 ES6가 적용됨 (⚠ 구 브라우저 지원불가)

const path = require("path");

module.exports = {
  mode: process.env.NODE_ENV === "production" ? "production" : "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  target : ['web', 'es5'],
};