Webpack Entry Points

Single Entry [Shorthand] Syntax

• 사용방법: entry: string|Array<string>
• Entry가 한개라면 위와같이 짧게 사용 할 수 있습니다.

webpack.config.js

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

Object Syntax

• 사용방법: {[entryChunkName: string]: string

  Array}

• 위와같이 작성할 경우 여러개의 Entry를 만들 수 있습니다. 이는 여러 종속 파일을 함께 주입하고 종속성을 하나의 “chunk”로 만들고 싶을 때 유용합니다.

webpack.config.js

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

• “확장 가능한 웹팩 구성”은 다른 부분 구성과 재사용하거나 결합 할 수있는 구성입니다. 이는 환경, 빌드 타겟 및 런타임에 대한 우려를 분리하는 데 사용되는 보편적 인 기술입니다. 그런 다음 webpack-merge와 같은 특수 도구를 사용하여 병합됩니다.

Scenarios

Seperate App and Vendor Entries

• optimization.splitChunks옵션은 vendor와 앱모듈들을 분리하여 파일을 생성합니다. 따라서 vendor를 위해 entry를 만들지 마세요.

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를 사용하여 각 페이지 사이에 공유 응용 프로그램 코드 번들을 작성하십시오. 진입 점 사이에 많은 코드 / 모듈을 재사용하는 다중 페이지 응용 프로그램은 진입 점의 수가 증가함에 따라 이러한 기술을 통해 많은 이점을 얻을 수 있습니다.

Source

• https://webpack.js.org/concepts/entry-points/