Webpack이란? 🧐

정의 📋

최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)

모듈 번들러: 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구

동작 과정 💪

어플리케이션은 많은 모듈들로 구성되어 있고 이 모듈들은 서로 복잡한 참조관계를 이룸

• 웹팩은 이 모듈들의 참조 관계를 해석해서 의존성 그래프를 생성

  의존성 그래프 : 웹팩이 모듈들의 참조 관계를 해석한 내용

• entry를 기점으로 의존성 그래프를 만들고 번들 과정을 거침

• output이라는 요소에 설정된 정보를 기반으로 번들된 파일이 생성

• 요약

  1. 모듈들의 의존 관계를 해석
  2. 의존성 그래프들을 생성
  3. 의존성 그래프로 모듈들을 해석
  4. 번들링하는 과정 진행

구성요소(webpack.config.js) 🔩

1. Entry

정의

• 모듈의 의존 관계를 파악하기 위한 시작점을 지정
• 의존성 그래프를 만들기 위해 어떤 모듈을 시작점으로 해석할 지 결정해주는 요소

역할

• 웹팩이 참조 관계에서 가장 상위에 있는 모듈을 시작점으로 해당 모듈이 가지고 있는 다른 모듈과의 의존 관계를 해석
• 번들 파일 생성

2. Output

정의

• 의존 관계가 파악된 모듈의 번들 파일들을 출력
• 웹팩이 생성하는 번들 파일에 대한 정보들을 설정
  Ex. 번들 파일이 생성되는 위치, 파일의 이름 등

속성

• filename: [name] : entry 파일 이름 혹은 웹팩 설정 파일 내에서 name 프로퍼티에 할당한 값이 적용

3. Module

역할

• build 환경을 구분 (development / production)
• 번들 과정에서 devel 모드인지 prod 모드인지에 따라 번들 파일이 생성되는 결과나 작업 환경을 달라지게끔 설정

4. Target

역할

• 웹팩이 어떤 환경에서 실행되는지 웹팩에게 알려줌

5. Rules

속성

• test : 어떤 파일들이 로더의 대상이 되는지 정규표현식을 통해 패턴 매칭으로 설정할 수 있음
• use : 사용하는 loader를 지정하는 loader key와 loader의 동작을 설정할 수 있는 options를 사용

6. Optimization

역할

• 웹팩의 번들 파일을 최적화 시켜주는 역할
  (chunk 단위로 파일을 쪼개는 것도 번들 파일을 최적의 상태로 만들어주는 것)

Webpack 프로젝트 설정해보기 🛠

기본 설정

1. package.json 파일 생성

npm init -y

2. webpack-cli 패키지 설치

   webpack-cli : 웹팩을 실행할 수 있는 명령어들을 지원해주는 패키지

npm i -D webpack-cli

3. dist, src 디렉토리 생성
4. src 디렉토리로 번들 시킬 파일 이동
5. webpack 명령어로 번들 파일 생성

npx webpack --target=node

npx : Node 패키지를 실행시키는 도구

출처 📝

• Vue.js 압축 완성 올인원 패키지 Online - 패스트캠퍼스

위의 내용은 Webpack을 공부하며 개인적으로 정리한 내용입니다.
본문에 관련된 문제 사항이 있는 경우, 댓글로 남겨주시면 감사하겠습니다! 🙌