[webpack_is] webpack 구성요소에 대해서.

'webpack을 공부하며 기록한 글 입니다. 이 글을 시작으로 보완해가면서 webpack4 튜토리얼을 정리하고자 합니다'

Webpack 사용 이유

다수의 파일을 서버에 매번 요청하는 것 보다는 하나의 파일로 작업하는 것이 웹 성능에 도움이 되고 파일 관리 측면에 효율성을 가진다 한다.

Webpack의 구성요소

폴더 바구니 안에 여러 파일 꾸러미가 가득 담겨 있다,
각각의 파일들은 서로 의존관계를 가지고 있으며.웹팩은 이런 구조를 바탕으로
하나의 번들된 파일을 떨군다(생성한다).

Entry

어디에서부터 웹팩이 코드를 변환시켜야 하는지, 그 출발점(시작)을 입력하는 곳이다.

프로젝트를 구성하는 파일들을 하나의 파일로 묶을 경우, 묶는 첫 시작점이 어디일지를 정리하는 곳이다.Entry는 여러 개의 엔트리를 가질 수 있다.

output

파일을 떨군다고 했다. 그럼 그 파일을 어디에 위치할지를 알리는 곳이다.

대부분 "dist"라는 폴더명을 만들어 여기에 완성된 파일을 저장한다(저장된다).Entry와 달리 output은 단 한 개만 입력 할 수 있다.

Loader

파일 꾸러미에 다양한 파일이 존재할 수 있다. 이 파일들을 처리해야하는데 웹팩은 Loader를 통해 각각의 것들을 "어떻게 관리"할 정해준다.

웹팩은 자바스크립트 밖에 모르기 때문에 그 외 파일들을 처리(관리)하는 방법이 필요하다.
자바스크립트는 babl-loader,(S)CSS와 style를 관리하는 css-loader, style-loader,텍스트는 raw-loader 등등 해당하는 로더가 존재한다.
즉,필요한 로더를 설정해주면 된다. 파일의 종류를 살펴보고 각 파일에 해당하는 로더에 의해 변환이 결정된다.

Plugin

해당 종류의 파일"만" 변환시키는 Loader와 달리 Plugin은 번들 된 전체 코드를 대상으로 작업한다.

또한 헬퍼 함수같이 특정 이슈에 필요한 Plugin이 미리 존재해 찾아서 적용하면 된다. 예를 들어 공통된 모듈로 별도 관리를 도와주는 commonChunk Plug-In과 전체 코드를 난독화/압축하도록 돕는 uglify Plug-In 이 있다.