webpack 개념 1.엔트리 포인트 Entry Points

엔트리 포인트 Entry Points

entry 속성을 정의하는 방법은 여러가지가 있다.

싱글 엔트리(축약형) 구문 Single Entry (Shorthand) Syntax

entry: string|Array<string>

webpack.config.js

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

위 코드는 이 코드의 축약본이다.

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

entry 에 배열을 선언하면 어떻게 되는가?

배열을 전달하면 multi-main entry가 생성된다. 여러개의 의존성 파일을 하나의 chunk 로 모으고 이들의 의존성 그래프를 생성하고 싶을때 유용하다.

이것은 (라이브러리 같은) 하나의 엔트리 포인트를 갖는 어플리케이션 혹은 툴을 빠르게 설정할때 좋은 선택이지만, 확장성이 떨어진다.

객체 구문 Object Syntax

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

webpack.config.js

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

객체는 더 복잡하지만, 확장성이 뛰어나다.

확장 가능한 웹팩 설정 : 재사용성, 다른 설정과의 결합이 뛰어나다. 이것은 환경, 빌드 대상, 런타임에 의한 관심사 분리에 많이 사용되는 기술이다.

시나리오 Scenarios

실제 사용 리스트들

멀티 페이지 어플리케이션 Multi Page Application

webpack.config.js

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

이것은? 3개의 분리된 의존성 그래프를 사용한다고 선언

이유는? 멀티 페이지 어플리케이션에서 서버는 새로운 HTML 문서를 제공한다. 새로고침되고 문서와 에셋들은 다시 다운로드 받는다. 그러나 이것은 여러가지 일을 가능하게 만들어 준다.

optimization.splitChunks 의 사용은 각 페이지에서 공유된 어플리케이션 코드의 번들을 생성한다. 엔트리 포인트의 수가 증가함에 따라, 이 기술을 통해 엔트리 포인트 사이에서 많은 코드/모듈을 재사용하는 멀티 페이지 어플리케이션은 엄청난 이점을 갖는다. 

규칙 : 각 HTML은 정확히 하나의 엔트리 포인트만 사용한다.

출처 : https://webpack.js.org/

개념

webpack 개념 0.Concepts

webpack 개념 1.엔트리 포인트 Entry Points

webpack 개념 2.아웃풋 Output

webpack 개념 3.모드 Mode

webpack 개념 4.로더 Loaders

webpack 개념 5.플러그인 Plugins

webpack 개념 6.설정 Configuration

가이드

webpack 강좌 1 : 설치

webpack 강좌 2. 시작하기

webpack 강좌 3. 에셋(자산) 관리 (Asset Management)

webpack 강좌 4. 결과물(Output) Management

webpack 강좌 5. 개발 Development

webpack 강좌 6. 핫 모듈 리플레이스먼트 Hot Module Replacement