[Webpack] - #1 Webpack이란?

 [ Webpack 시리즈 ]

 

[Webpack] - #1 Webpack이란?

[Webpack] - #2 Entry

[Webpack] - #3 Output

[Webpack] - #4 Loader

[Webpack] - #5 Plugin

[Webpack] - #6 Dev Server

[Webpack] - #7 웹팩 세팅하기 (feat: ES module)

 

 

 

 

웹팩이란?

자바스크립트 모듈 번들러중 가장 인기있는 모듈 번들러로 사용된다.

여러개로 나누어져있는 파일들을 각각의 모듈로 보고 이를 조합하고 압축해 최적화해주는 도구.

최종 배포용 파일을 만들어 준다.

웹팩에서 모듈이란?

자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원(HTML, CSS, JavaScript, Images, Font 등)을 의미한다.

 

 

 

웹팩의 동작 과정

모듈들의 참조 관계를 해석하고 의존성 그래프를 생성한다.

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

output이라는 요소에 설정된 정보를 기반으로 번들 파일을 생성하게 된다.

 

 

웹팩의 구조 (webpack.config.js)

 

Entry

• 모듈의 의존관계 파악을 위한 시작점을 지정하는 곳.
• 즉 웹팩이 빌드할 파일의 시작 위치.
• entry 지점으로부터 다른 모듈과 라이브러리에 대한 의존성을 찾는다.
• 디폴트 값은 ./src/index.js

 

Output

• 웹팩이 생성하는 번들 파일에 대한 정보를 설정.
• 즉 번들이 된 결과물 파일의 경로와, 이름을 지정
• 디폴트 값은 ./dist/main.js

 

Loaders

• 자바스크립트 파일이 아닌 파일들도 유효한 모듈로 변환시켜준다
• loaders의 설정은 rules 프로퍼티를 정의해야 하며, rules프로퍼티는 test와 use를 필수 프로퍼티로 갖고있다.
  • test : 변환해야하는 파일 또는 파일들을 식별하는 역할, 정규표현식을 통해 패턴으로 설정 가능.
  • use: 변환되어야하는 파일에 대해 어떤 로더를 사용해야하는지 설정

 

Plugin

• 플러그인은 웹팩의 기본 동작에 추가적인 기능을 제공한다.
• 로더는 파일을 재해석하고 변환한다면 플러그인은 결과물의 형태를 바꾸는 역할이다.

 

 

 

 

 

 

참고 - https://joshua1988.github.io/webpack-guide/guide.html