Webpack 공식 홈페이지 따라하기 (3) - EntryPoints

 

Entry 속성을 정의하는 방법은 여러가지가 존재한다.

Entry 속성을 설정할 수 있는 방법과 유용한 이유에 대해 알아보자

*Entry :  webpack이 내부의 디펜던시 그래프를 생성하기위해 사용하는 모듈

 

1. Single Entry (shorthand) Syntax

Usage: entry: string | [string]

 

 

entry: './path/to/my/entry/file.js' // entry 속성에 대한 단일 엔트리 구문은 다음 내용의 축약된 표현이다

 

entry: {
	main: './path/to/my/entry/file.js',
  },

 

다중-메인 엔트리로 알려진 것을 생성하기 위해 entry 속성에 파일 경로를 배열로 전달할 수 있다.

이를 통해 여러 의존성 파일을 한 번에 주입하고 해당 의존성을 하나의 "청크"에 그래프로 표시할 때 유용하다.

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

 

2. Object Syntax

Usage: entry: { <entryChunkName> string | [string] } | {}

entry: {
	app: './src/app.js',
    adminApp: './src/adminApp.js',
}

 

객체 구문은 Entry를 정의하는 가장 확장가능한 방법이다.

 

 

3. EntryDescription object

엔트리 포인트 설명이 있는 객체로, 다음 속성을 지정할 수 있다.

• dependOn
  • 현재 엔트리 포인트가 의존하는 엔트리 포인트, 엔트리 포인트가 로드하기전에 로드되어야한다.
• filename
  • 디스크에 있는 각 출력 파일의 이름을 지정
• import 
  • 시작시 로드되는 모듈
• library
  • 현재 엔트리에서 라이브러리를 번들링하려면 라이브러리 옵션을 지정한다
• runtime
  • 런타임 청크의 이름이다. 설정되면 해당 이름의 런타임 청크가 생성되고 그렇지 않으면 기존 엔트리 포인트 이름이 사용된다.
• publicPath
  • 브라우저에서 참조할 때 이 엔트리의 출력 파일에 대한 공용 URL 주소를 지정

 

 

4. Scenarios

엔트리 설정 및 실제 사용 사례 목록이다.

 

App과 Vendor Entries 분리

 

// webpack.config.js

module.exports = {
	entry: {
    	main: './src/app.js',
        vendor: './src/vendor.js',
   	}
};

// webpack.prod.js

module.exports = {
	.output: {
    	filename: '[name].[contenthash].bundle.js',
    },
}

// webpack.dev.js

module.exports = {
	output: {
    	filename: '[name].bundle.js',
   	},
}

 

이것은 main과 vendor 2개의 개별 엔트리 포인트를 원한다고 webpack에 알려준다

이를통해 vendor.js 내에서 수정되지 않은 필수 라이브러리 또는 파일 (예를 들면 Bootstrap, jQuery, images, 등)을 가져올 수 있으며, 자체 청크로 함께 번들 제공한다.

 

콘텐츠 해시는 동일하게 유지되므로 브라우저가 별도로 캐시하여 로드 시간을 줄일 수 있다.