웹 팩을 사용하여 간단한 정적 사이트를 묶는 방법

<:> 웹 팩 : 정적 사이트 개발 간소화 매우 인기있는 JavaScript 모듈 Bundler (55,000 개 이상의 GitHub Stars!) 인 Webpack은 종종 React 또는 Angular와 같은 프레임 워크를 사용하여 대규모 프로젝트와 관련이 있습니다. 그러나 번들링 기능은 더 작은 정적 사이트에서도 똑같이 유익합니다. 이 기사는 웹 팩을 활용하여 간단한 정적 사이트에 최적화 된 번들을 만들어 성능을 향상시키고 HTTP 요청을 줄이는 방법을 보여줍니다. 정적 사이트에 웹 팩을 사용하는 주요 장점 :

http 요청이 줄어 듭니다.

여러 자산 (JavaScript, CSS, 이미지)을 더 적은 번들로 통합하여 페이지로드 시간 속도를 높이고 있습니다. 미니 화 :

코드에서 불필요한 문자를 제거하여 파일 크기를 줄입니다. 변환 :

는 이전 브라우저 (ES5)와의 호환성을 보장하면서 최신 JavaScript 구문 (ES6)을 사용할 수 있습니다. 단순화 된 자산 관리 : 다양한 자산 관리에 대한 구조적 접근 방식을 제공합니다. 자동화 : 자동화 된 빌드 프로세스를 위해 NPM 스크립트와 완벽하게 통합됩니다. 웹 팩 설정 :

전제 조건 :
• node.js 및 npm (또는 NVM과 같은 노드 버전 관리자)을 설치해야합니다. 프로젝트 설정 : 프로젝트 디렉토리를 만들고 샘플 프로젝트 (예 : github에서)를 복제하거나 자신의 기본 HTML, CSS 및 JavaScript 파일을 작성하십시오.
웹 팩 설치 :
• 디렉토리 구조 :
폴더를 생성하여 번들 출력을 유지합니다.
• 기본 웹 팩 구성 () :
• 이 구성은 진입 점 (), 빌드 모드 ( 빌드 프로세스 자동화 : 빌드 스크립트를 : 에 추가하십시오
이제 실행 중
• 는 웹 팩 빌드 프로세스를 실행합니다 html에 번들을 포함하여 : html의 개별 JavaScript 파일에 대한 참조를 번들링 (
폴더에 위치)로 바꾸십시오. 추가 자산 번들 (CSS, 이미지, 글꼴) :

웹 팩은 로더를 사용하여 다른 파일 유형을 처리합니다. CSS를 번들로 만들려면 및

()를 설치하고 : 에 규칙을 추가하십시오.

module.exports = {
  entry: './src/js/app.js',
  mode: 'development',
  output: {
    path: `${__dirname}/dist`,
    filename: 'bundle.js',
  },
};

이미지와 글꼴의 경우

가 유용합니다 () url-loader npm install --save-dev url-loader 생산 최적화 :

로 전환하여 미니 화 및 기타 최적화를 가능하게합니다. 추가 CSS 최적화를 보려면 및 를 사용하는 것을 고려하십시오 고급 기술 (간단한 개요) :

코드 분할 : 코드를 작은 청크로 나누어로드 시간을 개선하십시오. 핫 모듈 교체 (HMR) : 전체 페이지 재 장전없이 브라우저의 코드 업데이트 (WebPack Dev 서버 필요). 다른 페이지의 다른 번들 :

각 페이지에 대해 다운로드 된 코드의 양을 줄이기 위해 다른 페이지에 대한 별도의 번들을 만듭니다.

이 안내서는 정적 사이트 개발을 위해 웹 팩 사용에 대한 기본적인 이해를 제공합니다. 고급 기능과 플러그인을 추가로 탐색하면 더 큰 최적화와 효율성이 높아집니다. 자세한 정보 및 최신 모범 사례는 공식 웹 팩 문서를 참조하십시오. mode: 'production'

위 내용은 웹 팩을 사용하여 간단한 정적 사이트를 묶는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!