Webpack 핵심 개념 항목 구성(entry)

프로젝트에 있는 각 모듈의 종속성이 트리로 간주되는 경우 해당 항목은 종속성 트리의 루트입니다.

이러한 종속 모듈은 패키징 시 덩어리로 캡슐화됩니다. 그럼 청크란 무엇인가?

청크(Chunk)는 문자 그대로 코드 블록을 의미하며, Webpack에서는 추상화되고 패키징된 일부 모듈로 이해될 수 있습니다. 이는 많은 파일을 포함하는 파일 가방과 같습니다. Webpack은 외부에 패키징 레이어를 추가하여 덩어리를 형성합니다.

특정 구성에 따라 프로젝트를 패키징할 때 하나 이상의 청크가 생성될 수 있습니다.

프로젝트에는 여러 항목이 정의될 수 있으며 각 항목은 결과 리소스를 생성합니다.

예를 들어 프로젝트에는 src/index.js 및 src/lib.js dist/index.js 개의 항목이 있습니다. dist/lib.js

일부 특별한 경우에는 하나의 항목이 여러 청크를 생성하고 궁극적으로 여러 번들

항목을 생성할 수 있습니다.

매개변수: 항목

• 항목은 입력으로 추상화될 수 있는 구성 모듈의 입구입니다 . Webpack 빌드 실행의 첫 번째 단계는 모든 항목 종속 모듈을 검색하고 재귀적으로 구문 분석하는 것입니다.
• 그렇지 않은 경우 항목 구성이 필요합니다. 채워지면 Webpack은 오류를 보고하고

module.exports = {를

	Entry:'./src/index.js', //항목 파일을 나타냅니다. 즉, index.js에서 프로젝트를 입력합니다.}

①

이 배열 유형인 경우 출력과 함께 사용될 때

라이브러리 구성 항목, 배열의 마지막 항목만 항목 파일의 모듈이 내보내집니다

② 청크 이름

• 항목

구성과 관련됩니다.

• 이 때 Chunk의 이름은 main이며,
• 항목이 객체인 경우 여러 개의 Chunk가 나타날 수 있습니다. 객체 키-값 쌍의 키

③항목 구성 역학

프로젝트에 여러 페이지가 있는 경우 각 페이지에 대한 항목을 구성해야 하지만 이러한 페이지 수가 계속 증가할 수 있으므로 항목 구성 다른 요소의 영향을 받으며 정적 값으로 쓸 수 없습니다. 해결책은 위에서 언급한 구성을 동적으로 반환하는 함수에 Entry를 설정하는 것입니다.

// 동기 함수 항목: () => {
  반품 {
    a:'./페이지/a',
    b:'./페이지/b',
  }
};
// 비동기 함수 입력: () => {
  새로운 약속을 반환((해결)=>{
    해결하다({
       a:'./페이지/a',
       b:'./페이지/b',
    });
  });
};

매개변수: context

Webpack은 상대 경로가 있는 파일을 찾을 때 context를 루트 디렉터리로 사용합니다 . Context는 Webpack이 시작된 현재 작업 디렉터리를 기본값으로 사용합니다. 컨텍스트의 기본 구성을 변경하려면 구성 파일에서 다음과 같이 설정할 수 있습니다.

module.exports = {
	컨텍스트: path.resolve(__dirname, 'app')
}

컨텍스트는 절대 경로 문자열이어야 합니다.

Webpack을 시작할 때 webpack --context 매개변수를 가져와

단일 항목 파일 구성을

사용법: entry:string|Array<string>

1. 약식 구문

webpack.config.js

//싱글이므로 다음과 같이 약식으로 쓸 수 있습니다.
모듈.수출 = {
  항목: './main.js'
};

위 항목 구성은 실제로 다음과 같은 약어

module.exports = {

  항목: {
    메인: './main.js'
  }
};

2. 배열 구문

module.exports = {
  항목: {
    메인:['./main.js','./main2.js']
  }
};

배열을 전달하는 기능은 여러 리소스를 미리 병합하는 것입니다. 패키징할 때 Webpack은 배열의 마지막 요소를 실제 항목 경로로 사용합니다

. 청크 이름을 변경하는 방법은 기본 "main"만 될 수 있습니다.

다중 항목 파일 구성

사용법: entry: {[entryChunkName: string]: string|Array}

객체 구문

module.exports = {
  항목: {
    앱: './src/app.js',
    공급업체: './src/vendors.js'
  }
};

이것은 더 번거로울 것입니다. 그러나 이는 애플리케이션에서 진입점을 정의하는 가장 확장 가능한 방법입니다.

"확장 가능한 웹팩 구성" : 재사용이 가능하고 다른 구성과 결합할 수 있습니다. 이는 환경, 빌드 대상 및 런타임과 관련된 문제를 분리하는 데 널리 사용되는 기술입니다. 그런 다음 webpack-merge와 같은 특수 도구를 사용하여 병합합니다.

애플리케이션 시나리오

1. 단일 페이지 애플리케이션은

프레임워크, 라이브러리, 각 페이지의 모듈 등 app.js 의 단일 진입점에서 참조됩니다. 이것의 장점은 하나의 JS 파일만 생성되고 종속성이 명확해진다는 것 입니다.

모듈.수출 = {
  항목: './src/app.js'
};

이 접근 방식에는 모든 모듈이 함께 패키지된다는 단점도 있습니다. 즉, 애플리케이션의 규모가 특정 수준으로 증가하면 생성되는 리소스 볼륨이 너무 커져 기본적으로 사용자의 페이지 렌더링 속도가 저하됩니다

. Webpack 구성에서 번들이 250kB(압축 전)보다 큰 경우 번들은 너무 큰 것으로 간주되어 그림과 같이 패키징 중에 경고가 발생합니다.

2. 타사 라이브러리(vendor) 분리

위의 문제를 해결하기 위해서는 타사 라이브러리(vendor)를 추출하면 됩니다.

Vendor는 Webpack에서 일반적으로 라이브러리 등의 타사를 의미합니다 . 그리고 프로젝트에서 사용하는 프레임워크입니다.

Module.exports = {
  항목: {
    앱: './src/app.js',
    벤더: ['react','react-dom','react-router'],
  }
};

적용 예를 바탕으로, vendor 라는 청크 이름으로 새로운 입구를 추가했고, 프로젝트가 의존하는 써드파티 모듈을 배열 형태로 넣었습니다

. .Webpack은 무엇을 해야 할까요?

현재 CommonsChunkPlugin (CommonsChunkPlugin은 Webpack 4 이후에 폐기되었으므로 Optimization.splitChunks를 사용할 수 있음)을 사용

하여

포함 비즈니스 모듈과 이에 의존하는 타사 모듈이 추출되어 새 번들을 생성하며, 이는 공급업체 추출이라는 목표도 달성합니다.

공급업체에는 타사 모듈만 포함되어 있으므로 이 부분은 자주 변경되지 않습니다. 따라서 클라이언트측 캐싱을 효과적으로 활용하여 사용자가 이후에 페이지를 요청할 때 전체 렌더링 속도를 높일 수 있습니다.

CommonsChunkPlugin은 첫 번째 화면에 로드되는 번들 파일이나 요청 시 로드되는 번들 파일이 너무 커서 로딩 시간이 길어지는 것을 방지하기 위해 타사 라이브러리 및 공용 모듈을 추출하는 데 주로 사용됩니다.

3. 다중 페이지 애플리케이션

다중 페이지 애플리케이션 시나리오의 경우 리소스 크기를 최대한 줄이기 위해 모든 페이지를 동일한 번들로 패키징하는 대신 각 페이지에 필요한 로직만 로드하기를 바랍니다. 따라서 각 페이지에는 독립적인 번들이 필요합니다 . 이 경우 이를 달성하기 위해 여러 항목을 사용합니다. 다음 예를 참조하세요.

module.exports = {
  항목: {
    페이지원: './src/pageOne/index.js',
    페이지2: './src/pageTwo/index.js',
    페이지3: './src/pageThree/index.js'
  }
};

위 구성은 webpack에 3개의 독립적이고 분리된 종속성 그래프가 필요함을 알려줍니다. 이때 항목과 페이지는 일대일 대응이므로 각 HTML은 필요한 모듈을 로드할 수 있습니다. 자체 JS.