사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음

Webpack

프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하는 번들러

여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러
➡️ HTML, CSS, JS 자원을 저눕 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링하는 도구

모듈 번들러?

시작점(react app의 index.js와 같은 시작점)으로 부터
의존성을 가지는 모듈을 모두 추적하여 하나의 결과물을 만들어내는 번들러

webpack의 필요성

웹 앱의 빠른 로딩 속도와 높은 성능에 필요함
코드가 많으면 많을수록 웹 페이지의 로딩 속도와 성능 저하의 원인

Webpack이 없다면 각 자원을 일일히 서버에 요청해 얻어와야 하지만, Webpack이 있다면 같은 타입의 파일들은 묶어서 요청 및 응답받을 수 있기 때문에 네크워크 코스트 줄어듬

핵심 개념

• target : 컴파일 환경
• Entry : 작성한 코드의 시작점
• Output : 생성된 번들을 내보낼 위치와 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할
• Loader : Webpack이 다른 유형의 파일 처리하거나, 유효한 모듈로 변환해 앱에 사용하거나 디펜던시 그래프에 추가할 수 있습니다
• Plugins : 번들을 최적화하거나 에셋을 관리, 환경변수 주입등 광범위한 작업 수행할 수 있게함

1. Webpack 설치 및 설정

• npm init -y
  별로도 yes 누르지 않고 package.json 생성

• npm install webpack webpack-cli --save-dev
  webpack 설치
  // install 은 i --save-dev 는 -D로 대체가능하다

• webpack.config.js 파일 작성

• 06:39 서버
  webpack-dev-server : 매번 build할 필요없이 자동 build 역할
  -> mode 옵션이 developement 여야 사용가능
  package.json에서 옵션값을 줘야함

• 09:39 css
  npm i -D style-loader css-loader

• 12:15 external css
  npm i -D mini-css-extract-plugin
  외부 css 파일을 적용가능하게 함, 링크로 불러온다

• 13:42 이미지 file-loader
  npm i -D file-loader

// webpack.config.js
  module: {
        rules: [
            {
                test: /\.jpg$/,
                use: ["file-loader"],
            },
        ],
    },