Webpack - 웹팩 Entry (2)

지난 포스트에 이어서 웹팩의 구성 요소인 Entry에 대해서 알아보도록 하겠습니다.

Entry Point (진입점)

진입점(entry point)은 웹팩이 내부 종속성 그래프 작성을 시작하는데 사용해야하는 모듈의 시작을 나타냅니다. 웹팩은 진입점을 시작으로 직/간접적으로 의존하는 다른 모듈과 라이브러리를 알아냅니다.

기본적으로 값은 ./src/index.js 이지만 웹팩 config에서 항목 속성을 설정하여 다른 진입점을 지정할 수 있습니다. 에를 들면

// webpack.config.js

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

Single Entry (Shorthand) Syntax (단독 진입 구문)

Usage: entry: string | [string]

//webpack.config.js

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

항목 속성에 대한 단일 항목 구문은 다음의 약어입니다.

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

배열을 항목에 전달하면 어떻게 될까요? 파일 경로 배열을 entry 속성에 전달하면 ‘다중 기본 항목’이 생성됩니다. 여러 종속 파일을 함께 삽입하고, 해당 종속성을 하나의 ‘chunk’에 그래프로 표시하려는 경우 유용합니다.

이는 하나의 진입점 (예: 라이브러리) 이 있는 응용 프로그램 또는 도구에대한 웹팩 구성을 빠르게 설정하려는 경우 훌륭한 선택입니다. 그러나 이 구문을 사용하여 구성을 확장하는데는 그다지 유연성이 없습니다.

Object Syntax (객체 구문)

Usage: entry: { string | [string] } | {}

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

객체 구문이 더 명확합니다. 그러나 이것은 애플리케이션에서 entry/entryes 를 정하는 가장 확장 가능한 방법입니다.

“확장 가능한 웹팩 구성”은 재사용 및 다른 부분 구성과 결합할 수 있는 구성입니다.ㅏ 이것은 환경, 빌드 대상 및 런타임별로 관심사를 구분하는데 사용되는 인기 있는 기술중 하나입니다. 그런 다음 webpack-merge와 같은 특수 도구를 사용해 병합합니다.

플러그인에 의해 생성된 진입점만 있는 경우, 빈 객체 {} 를 항목에 전달할 수 있습니다.

Scenarios (시나리오)

다음은 entry 구성 및 실제 사용 사례 목록입니다.

Separate App and 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'
  }
};

이것들은 무엇을 나타내는 걸까요? 바로 2개의 진입점을 원한다고 웹팩에 알려줄 수 있습니다.

왜 이렇게 알려줄까요? 그것은 이것을 통해 vendor.js 내에서 수정되지 않은 필수 라이브러리 또는 파일 (예: bootstrap, jQuery, 이미지 등)을 가져올 수 있으며, 이들은 자체 chunk로 함께 번들됩니다. contentHash는 동일하게 유지되므로 브라우저에서 별도로 캐시하여 로드되는 시간을 줄일 수 있습니다.

웹팩 버전 4미만 버전에서는 공급 업체(vendor)를 별도의 진입점으로 추가하여 이를 별도의 파일로 컴파일하는 것이 일반적입니다. (CommonsChunkPlugin 과 함께 사용)

이것은 웹팩4에서는 권장되지 않습니다. 대신에, optimization.splitChunks 옵션을 사용해 공급업체와 웹 모듈을 분리하고, 별도의 파일을 생성할 수 있습니다. 실행의 시작점이 아닌 공급업체 또는 기타 항목에 대한 entry를 만들지 마세요.

Multi Page Application (다중 페이지 어플리케이션)

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

이것은 무엇을 의미할까요? 우리는 위의 예와 같이 3개의 개별 종속성 그래프를 원한다고 웹팩에 알려줄 수 있습니다.

왜 이렇게 알려줄까요? 다중 페이지 어플리케이션에서 서버는 새 HTML 문서를 가져옵니다. 페이지가 이 새 문서를 다시 로드하고 자신이 다시 다운로드됩니다. 그러나 이것은 우리에게 각 페이지 사이에 공유 어플리케이션 번들을 생성하기 위해 Optimization.splitChunks를 사용하는 것과 같은 일을 할 수 있는 독특한 기회를 제공합니다. 진입점 사이에 많은 코드/모듈을 재사용하는 다중 페이지 어플리케이션은 진입점이 증가함에 따라 이러한 기술에 이점을 크게 누릴 수 있습니다.

경험상 각 HTML 문서에 대해 정확히 하나의 진입점을 사용하세요.