webpack 설정에서 entry 프로퍼티를 정의하는 방법은 여러가지가 있다.
Single Entry Syntax
entry 프로퍼티에 string이나 string 배열을 전달하는 경우이다.
webpack.config.js
- string 값을 전달하는 경우
entry 프로퍼티를 다음과 같이 사용할 수 있다.
module.exports = {
entry: './src/index.js',
}위 설정은 다음 설정에 대한 축약표현이다.
module.exports = {
entry: {
main: './src/index.js',
}
}- string 배열을 전달하는 경우
entry 프로퍼티에 path에 해당하는 값의 배열을 전달할 수 있다.
해당 설정은 multi-main-entry 를 생성한다.
여러개의 파일을 하나의 청크로 그래프화하는데 사용한다.
module.exports = {
entry: ['./src/file_1.js', './src/file_2.js'],
output: {
filename: 'bundle.js',
}
}Single Entry Syntax 는 하나의 entry point를 가진 하나의 어플리케이션에 대해 설정할 때 유용하다.
일반적인 싱글페이지 어플리케이션이 사용하는 방식이기도하다.
예로 create-react-app 은 src/index 경로를 entry 프로퍼티에 전달한다.
Object Syntax
entry 프로퍼티에 객체 값을 전달한다.
다음과 같은 형태로 전달한다.
{
<entryChunkName1>: string | string[],
<entryChunkName2>: string | string[],
}webpack.config.js
module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
}
}plugin에 의해 생성된 entry point만 있다면 빈객체를 전달할 수도 있다.
object syntax 는 single entry syntax 에 비해 조금 더 복잡하다.
하지만 확장가능한 구조이다.
확장가능한 webpack 설정은 재사용될 수 있고 다른 설정과 결합가능하다.
다음 조건에 따라 관심사의 분리를 하기위한 테크닉이다.
- 빌드 환경
- 빌드 타겟
- 런타임
EntryDescription object
entry point에 대한 설정을 구체화할 수 있다.
다음 프로퍼티를 사용한다.
- dependOn: entry point가 의존하는 entry point이다. 의존한다는 뜻은 디펜던시 그래프를 생성할 때 명시한 entry point가 먼저 로드되어야한다는 의미이다.
- filename: output 파일의 이름을 명시한다.
- import: 빌드 시작시 로드할 모듈을 명시한다.
- library: entry point 에서 library를 번들링하기 위해, library option을 명시한다.
- runtime: runtime 청크의 이름을 명시한다. setting 되었을 때 새로운 runtime 청크가 생긴다.
- publicPath: 해당 entry 의 output file의 public url 을 명시할 수 있다.
webpack.config.js
다음설정은 a2가 로드된 이후에 b2가 로드되어야한다는 것을 의미한다.
module.exports = {
entry: {
a2: 'dependingfile.js',
b2: {
dependOn: 'a2',
import: './src/app.js'
}
}
}주의점
다음 상황에서 에러가 발생한다.
- dependOn과 runtime 프로퍼티가 하나의 entry description 에 함께 쓰일 수 없다.
- circular dependency
- runtime 프로퍼티가 명시된 entry chunk name 을 가리키는 경우
entry point 사용예제
app 과 vendor의 entry를 분리하는 경우
vendor entry를 추가하는 것은 현재 webpack 버전에서 일반적으로 사용되지 않는 방식이지만 예제차원에서 살펴본다.
webpack.config.js
module.exports = {
entry: {
main: './src/app.js',
vendor: './src/vendor.js'
}
}webpack.prod.js
module.exports = {
output: {
filename:
}
}webpack.dev.js
module.exports = {
output: {
filename: '[name].bundle.js'
}
}위 설정을 통해 2개의 분리된 entry point를 만들수 있다.
번들을 분리하는 이유
수정되지 않은 파일(vendor)끼리 하나의 청크로 번들할 수 있다.
content hash 값이 같게 유지함으로서 캐싱을 통해 로드타임을 줄일 수 있다.
위와 같은 방식은 webpack 4 미만 버전에서 일반적으로 사용되는 방식이다.
하지만 4버전부터, optimizationl.splitChunks 옵션으로 관리한다.
때문에 vender 파일을 위해 entry 를 추가하지 않는다.
멀티페이지 애플리케이션
webpack.config.js
module.exports = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/page/three/index.js'
}
}위 설정을 통해 3개의 디펜던시 그래프를 생성한다.
이유
멀티 페이지 앱에서 서버는 새로운 html 을 서빙할 것이다.
페이지는 새로운문서와 자원을 다시 다운로드 할 것이다.
이러한 설정은 optimization.splitChunks를 함께 사용했을 때 효과가 있다.
여러 페이지에서 함께 사용하는 모듈을 분리할 수 있기때문이다.
결과적으로 공유된 자원은 새로운 페이지를 불러올때 캐싱한 리소스를 바로 사용할 수 있다.
페이지가 늘어남에따라 공유된 자원을 분리하는 방식은 효과적이다.