[Webpack] 웹팩의 4가지 구성요소

1. 엔트리

: 번들링하고 싶은 파일들을 선언하는 것.

웹팩은 엔트리를 통해서 필요한 모듈들을 로딩하고, 하나의 파일로 묶는다.

즉, 의존성 그래프의 시작점이 엔트리이다.

 

2. 아웃풋

: 번들링되고 만들어질 파일에 대한 정보 명시

엔트리에 설정한 자바스크립트 파일을 시작으로 의존되어 있는 모든 모듈을 하나로 묶는다.

번들된 결과물을 처리할 위치는 output에 기록한다.

 

3. 로더

: 번들링을 진행하며, 실행되는 함수.

웹팩은 모든 파일을 모듈로 관리한다. (css, font, img 등등 모두.) 

근데 웹팩은 사실상 자바스크립트만 알고 있으므로, 다른 파일들을 웹팩이 이해하게끔 변경시켜주어야한다.

그게 로더의 역할이다.

ex) babel-loader

 

+ 특정 파일에 대해서 여러개의 로더를 사용하는 경우, 로더가 적용되는 순서에 주의해야 한다.

로더는 기본적으로 오른쪽에서 왼쪽 순으로 적용된다.

만약에 scss를 전처리하려면, sass로더로 전처리 후에 css를 처리해야하므로,

 

module: {
	rules: [
    	{
        	test: /\/scss$/,
            use: ['css-loader', 'sass-loader']
        }
    ]
}

위와 같이 구성되어야 할 것이다.

 

4. 플러그인

: 웹팩의 기본적인 동작에다가, 추가적인 기능을 제공하는 속성이다.

로더랑 비교하자면, 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물이 형태를 바꾸는 역할을 한다고 보면된다.

+ 플러그인의 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가할 수 있다.