Entry Points

시작하기에서 언급한 바와 같이, webpack 설정에서 entry 속성을 정의하는 방법은 여러 가지가 있습니다. entry 속성을 설정 할 수 있는 방법과 유용한 이유를 설명하겠습니다.

간단히 말해, 진입점은 webpack에게 내부 의존성 그래프를 구축하기 시작할 위치를 알려줍니다. 이 파일부터 시작하여 webpack은 가져온 모든 모듈과 자산을 재귀적으로 따라가 최종 번들에 포함되어야 할 항목을 결정합니다.

이 과정의 결과는 나중에 output 구성에 따라 디스크에 기록됩니다. output 구성은 번들로 묶인 파일이 어디에 어떻게 저장되는지를 제어합니다.

Single Entry (Shorthand) Syntax

Usage: entry: string | [string]

webpack.config.js

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

entry 속성에 대한 단일 엔트리 구문은 다음 내용의 축약된 표현입니다.

webpack.config.js

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

"다중-메인 엔트리"로 알려진 것을 생성하기 위해 entry 속성에 파일 경로를 배열로 전달할 수 있습니다. 이는 여러 의존성 파일을 한 번에 주입하고 해당 의존성을 하나의 "청크"에 그래프로 표시하려는 경우에 유용합니다.

webpack.config.js

module.exports = {
  entry: ["./src/file_1.js", "./src/file_2.js"],
};

엔트리포인트에 배열이 제공되더라도 Webpack은 여전히 단일 엔트리포인트 청크를 생성합니다. 배열에 있는 모든 모듈은 지정된 순서대로 로드되어 동일한 의존성 그래프로 결합됩니다.

이 패턴은 일반적으로 애플리케이션 소스 코드에 수동으로 가져오지 않고, 폴리필이나 개발 전용 도구와 같은 추가 코드를 메인 애플리케이션 진입점 앞에 삽입하는 데 사용됩니다.

Example: Injecting a polyfill

module.exports = {
  entry: {
    main: ["@babel/polyfill", "./src/index.js"],
  },
};

단일 엔트리 구문은 라이브러리같이 하나의 엔트리 포인트가 있는 애플리케이션 또는 도구에 대한 webpack 설정을 빠르게 설정하려는 경우 훌륭한 선택입니다. 그러나, 이 구문을 사용하면 설정을 확장할 수 있는 유연성이 떨어지게 됩니다.

Object Syntax

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

webpack.config.js

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

객체 구문은 더 장황합니다. 그러나, 이것은 애플리케이션에서 엔트리를 정의하는 가장 확장 가능한 방법입니다.

EntryDescription object

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

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

webpack.config.js

module.exports = {
  entry: {
    a2: "dependingfile.js",
    b2: {
      dependOn: "a2",
      import: "./src/app.js",
    },
  },
};

runtime과 dependOn은 단일 엔트리에 함께 사용해서는 안되므로, 다음 설정은 유효하지 않으며 오류가 발생합니다.

webpack.config.js

module.exports = {
  entry: {
    a2: "./a",
    b2: {
      runtime: "x2",
      dependOn: "a2",
      import: "./b",
    },
  },
};

runtime이 기존의 엔트리 포인트 이름을 가리키지 않아야 합니다. 예를 들어 아래 설정에서는 오류가 발생합니다.

module.exports = {
  entry: {
    a1: "./a",
    b1: {
      runtime: "a1",
      import: "./b",
    },
  },
};

또한 dependOn은 순환이 아니어야 하며, 다음 예제에서는 다시 오류가 발생합니다.

module.exports = {
  entry: {
    a3: {
      import: "./a",
      dependOn: "b3",
    },
    b3: {
      import: "./b",
      dependOn: "a3",
    },
  },
};

Scenarios

다음은 엔트리 설정 및 실제 사용 사례 목록입니다.

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개의 개별 엔트리 포인트를 원한다고 webpack에게 알려줍니다.

왜? 이를 통해, vendor.js 내에서 수정되지 않은 필수 라이브러리 또는 파일(예. Bootstrap, jQuery, images, 등)을 가져올 수 있으며, 이들은 자체 청크로 함께 번들 제공됩니다. 콘텐츠 해시는 동일하게 유지되므로, 브라우저가 별도로 캐시하여 로드 시간을 줄일 수 있습니다.

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개의 개별 디펜던시 그래프를 원한다고 webpack에게 알려줍니다.

왜? 멀티 페이지 애플리케이션에서 서버가 새 HTML 문서를 가져옵니다. 페이지가 새 문서를 다시 로드하고 애셋이 다시 다운로드됩니다. 그러나, 이것은 optimization.splitChunks를 사용하여 각 페이지 간에 공유되는 애플리케이션 코드 번들을 만드는 것과 같은 작업을 수행할 특별한 기회를 제공합니다. 엔트리 포인트들 사이에 코드/모듈을 많이 재사용하는 멀티 페이지 애플리케이션은 엔트리 포인트 수가 증가함에 따라 이런 기법의 혜택을 크게 얻을 수 있습니다.

Edit this page·Print this page

« Previous

Concepts

Output

10 Contributors

Translators

choilim