webpack4. config(2) - Entry & Context

목차

1. entry란?
2. 객체 문법
3. 간단 문법
4. context

 

 

---

 

 

1. entry란?

• 어플리케이션 번들 처리를 시작할 지점
• 만약 엔트리가 배열로 전달될 시, 배열의 모든 항목이 처리됨
• 동적으로 로드된 모듈은 엔트리 포인트가 아님

 

<참고>
HTML 페이징 하나당 하나의 엔트리 포인트를 가짐
SPA: 하나의 엔트리 포인트
MPA: 다중의 엔트리 포인트

 

2. entry 객체를 작성하는 문법1 - 객체 문법

• 재사용 가능하며 configurations의 다른 부분들과 결합 가능
• 주로 환경, 타겟 설정, 런타임 별로 관심사를 분리하기 위해 사용되는 방법이며 이후 webpack-merge와 같은 도구로 합병(merge)됨
• 플러그인에 의해 생성된 진입점만 존재한다면 entry로 빈 객체만을 넘겨도 됨

 

 

2-1. 속성

(1) dependOn

• 현재의 진입점이 종속되어 있는 진입점.
• 반드시 현재의 진입점이 로드되기 전에 로드되어야 함
• 기본적으로 모든 엔트리 청크는 사용하는 모든 모듈을 저장함. 옵션 설정을 통해 한 엔트리 청크에서 다른 엔트리 청크로 모듈 공유 가능

 

(2) filename

• 디스크에 있는 각각의 출력파일들의 이름을 지정
• 기본적으로 엔트리 청크의 출력 파일 이름은 output.filename에서 출력됨
• entry객체의 filename속성에 대한 속성값으로 특정 엔트리에 대한 커스텀 출력 파일명 지정 가능

 

(3) import

• 시작 시 로드되는 모듈 지정

 

(4) library

• 현재 엔트리에서 라이브러리 번들링 원할 경우 지정

 

(5) runtime

• 런타임 청크의 이름 지정.
• 디폴트로 기존 엔트리 포인트의 이름이 사용되며, 옵션 설정 시 해당 이름으로 런타임 청크 생성됨

 

(6) publicPath

• 브라우저 참조 시 해당 엔트르의 출력 파일에 대한 공용 URL 주소 지정

 

 

2-2. 주의할 점

• 하나의 엔트리에서 runtime과 dependOn은 동시에 설정될 수 없음
• runtime은 기존 진입점의 이름을 가리켜서는 안됨
• dependOn은 순환되서는 안됨

 

 

2-3. 작성 예시

module.exports = {
    entry: {
        a1: 'dependingfile.js',
        a2: {
            dependOn: 'a1',
            import: './src/app.js',
        },
        a3: {
            runtime: 'x2'
        }
    }
}

 

 

 

3. entry 객체를 작성하는 문법2 - 간단 문법(single entry)

3-1. 단일 엔트리 구문

• 파일 경로를 str으로 전달

module.exports = {
	entry: './path/to/my/entry/file.js'
}


//또는

module.exports = {
	entry: {
        	main: './path/to/my/entry/file.js'
    }
}

 

3-2. 다중 엔트리 구문

• 다중-메인 엔트리(multi-main entry)로 알려진 entry 속성 설정
• entry 속성에 파일 경로를 배열로 전달
• 여러 dependent 파일을 한번에 삽입하고, dependencies을 하나의 'chunk'에 도식화하려는 경우 유용
• 설정 확장 시 유연성이 다소 떨어짐

module.exports = {
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
    filename: 'bundle.js',
  },
};

 

 

4. context

• 엔트리 포인트와 로더를 확인하기 위한 절대 경로
• 작성하지 않아도 nodeJS 현재 작업중인 디렉토리가 사용됨(디폴트)
• 옵션 설정 시, 현재 작업 디렉토리와 독립적인 설정 가능

const path = require('path');

module.exports = {
  //...
  context: path.resolve(__dirname, 'app'),
};