웹 팩에 대한 초보자 안내서

이 기사는 웹 개발 워크 플로를 단순화하고 최적화하는 강력한 정적 모듈 패커 인 Webpack을 탐구합니다. 웹 팩 문서가 상세하지만 초보자는 여전히 가파른 학습 곡선의 문제에 직면 할 수 있습니다. 이 튜토리얼은 웹 팩의 핵심 개념을 마스터하고 실제 작업을 단계별로 안내하는 데 도움이되도록 설계되었습니다.

코어 포인트 :

WebPack 기본 사항 : Webpack은 모든 파일과 리소스를 모듈로 취급하고 종속성 그래프를 빌드하며 웹 배포를위한 하나 이상의 번들을 생성합니다. 핵심 개념 개요 :

• Webpack 5 향상 : Edition 5는 영구 캐시, 개선 된 트리 흔들림 및 자동 노드 폴리 플릴과 같은 기능을 소개하여 성능을 향상시키고 번들 크기를 줄입니다. Webpack의 초보자 : 기본 구성 파일을 설정하고, 기본 설정을 이해하고, 와 같은 플러그인을 사용하여 동적 HTML 생성을 수행하여 웹 팩 프로젝트를 시작하십시오. 고급 사용 :
• 및 사용법을 배우고 CSS를 처리하기 위해 내장 모듈을 사용하여 이전 로더를 대체하여 리소스를 관리하고 WebPack의 개발 서버를 실시간로드하는 데 사용하십시오. 개발 프로세스를 최적화하십시오. 제작 환경 모범 사례 : 웹 팩의 기능을 활용하여 최신 JavaScript를 변환하고 스타일 및 리소스를 관리하며 및 프로덕션 버전 구축을위한 최적화를 사용하여 개발 속도를 높이십시오.
웹 팩이란 무엇입니까?
• Webpack의 핵심은 정적 모듈 패커입니다. 특정 프로젝트에서 Webpack은 모든 파일과 리소스를 모듈로 취급하고 종속성 그래프에 의존합니다. 이 종속성 다이어그램은 파일 간의 참조 ( 및 문)를 통해 모듈이 서로 연관되는 방식을 설명합니다. Webpack은 모든 모듈을 통해 정적으로 반복하여 그래프를 작성하고이를 사용하여 모든 모듈에서 코드를 포함하는 JavaScript 파일 인 단일 번들 (또는 다중 다발)을 생성하고 올바른 순서로 결합합니다. "통계적으로"는 Webpack이 종속성 그래프를 빌드 할 때 소스 코드를 실행하지 않고 모듈과 종속성을 번들로 결합한다는 것을 의미합니다. 그런 다음 HTML 파일에 포함시킬 수 있습니다. 웹 팩 주요 개념 : 우리가 깊이 연습하기 전에 웹 팩의 주요 개념 중 일부를 명확하게 이해해야합니다.
  진입 :
  • 진입 점은 웹 팩이 내부 종속성 그래프를 구축하기 위해 사용하는 모듈입니다. 여기에서 다른 모듈과 라이브러리가 (직접적으로 간접적으로) 결정 지점이 의존하고 남은 종속성이 없을 때까지 그래프에 포함시키는 것을 결정합니다. 기본적으로 속성은 로 설정되지만 웹 팩 구성 파일에 다른 모듈 (또는 여러 모듈)을 지정할 수 있습니다. 출력 : entry 속성은 웹 팩이 번들과 파일에 사용할 이름을 발행하는 위치를 나타냅니다. 이 속성의 기본값은 기본 번들의 ./src/index.js이고 다른 생성 된 파일 (예 : 이미지)의
  입니다. 물론 필요에 따라 구성에서 다른 값을 지정할 수 있습니다.
  • 로더 : 기본적으로 Webpack은 JavaScript 및 JSON 파일 만 이해합니다. 다른 유형의 파일을 처리하고 유효한 모듈로 변환하기 위해 Webpack은 로더를 사용합니다. 로더는 자바 스크립트 모듈의 소스 코드를 변환하여 종속성 그래프에 추가하기 전에 이러한 파일을 전제로 처리 할 수 ​​있습니다. 예를 들어 로더는 커피 스크립트 언어에서 JavaScript로 파일을 변환하거나 인라인 이미지를 데이터 URL로 변환 할 수 있습니다. 로더를 사용하여 JavaScript 모듈에서 직접 CSS 파일을 가져올 수도 있습니다. 플러그인 : 플러그인은 로더가 수행 할 수없는 다른 작업에 사용됩니다. 이들은 자원 관리, 번들 최소화 및 최적화 등을위한 광범위한 솔루션을 제공합니다. output 모드 : ./dist/main.js 일반적으로 응용 프로그램을 개발할 때 두 가지 유형의 소스 코드를 사용합니다. 개발 버전 구축에는 하나와 프로덕션 버전 빌딩 용. WebPack을 사용하면 파라미터를 , ./dist 또는
  로 변경하여 버전을 생성 할 수 있습니다. 이를 통해 Webpack은 각 환경에 해당하는 내장 최적화를 사용할 수 있습니다. 기본 값은 입니다. 모드는 기본 최적화 옵션이 사용되지 않음을 의미합니다.
  • WebPack은 어떻게 작동합니까? 간단한 프로젝트조차도 HTML, CSS 및 JavaScript 파일이 포함되어 있습니다. 또한 글꼴, 이미지 등과 같은 리소스가 포함될 수도 있습니다. 따라서 일반적인 Webpack 워크 플로에는 적절한 CSS 및 JS 링크 및 필요한 리소스가있는
  파일을 설정하는 것이 포함됩니다. 또한, 상호 의존적 인 CSS 및 JS 모듈이 많으면 최적화하고 생산 준비가 된 장치로 적절히 결합해야합니다.
  • 이 모든 작업을 수행하기 위해 Webpack은 구성에 의존합니다. 버전 4 이후로 시작하여 Webpack은 상자에서 합리적인 기본값을 제공하므로 구성 파일이 필요하지 않습니다. 그러나 단순하지 않은 프로젝트의 경우 파일 및 리소스를 변환하는 방법과 생성해야 할 출력 유형을 설명하는 특수

    파일을 제공해야합니다. 이 파일은 빠르게 커질 수 있으므로 작동 방식의 주요 개념을 이해하지 않는 한 Webpack의 작동 방식을 이해하기가 어렵습니다. webpack.config.js 제공된 구성을 기반으로 WebPack은 진입 점에서 시작하여 종속성 그래프를 작성할 때 발생하는 모든 모듈을 구문 분석합니다. 모듈에 종속성이 포함 된 경우,이 프로세스는 트래버스가 완료 될 때까지 각 종속성에 대해 재귀 적으로 수행됩니다. 그런 다음 WebPack은 모든 프로젝트의 모듈을 브라우저를로드 할 수 있도록 적은 수의 번들 (보통 하나)으로 번들로 연결합니다.

    웹 팩의 새로운 기능 5 : Webpack 5는 2020 년 10 월에 출시되었습니다. 발표는 길고 웹 팩에 대한 모든 변경 사항을 탐색합니다. 모든 변경 사항을 언급하는 것은 불가능하며 이와 같은 초보자 가이드에게는 불필요합니다. 대신, 나는 몇 가지 일반적인 요점을 나열하려고 노력할 것입니다 :

    지속적인 캐시를 사용하여 빌드 성능을 향상시킵니다. 개발자는 이제 파일 시스템 기반 캐싱을 활성화하여 개발 및 구축 속도를 높일 수 있습니다. 장기 캐싱도 개선되었습니다. Webpack 5에서 최소화 된 번들 버전에 영향을 미치지 않는 코드 (주석, 가변 이름)로 변경해도 캐시 무효화는 발생하지 않습니다. 또한, 짧은 수치 ID를 모듈과 블록에 결정 론적 방식으로 할당하고 내보내기에 짧은 이름을 할당하는 새로운 알고리즘이 추가됩니다. Webpack 5에서는 생산 모드에서 기본적으로 활성화됩니다. 더 나은 트리 흔들림과 코드 생성으로 인해 번들 크기가 개선되었습니다. 새로운 중첩 트리 흔들림 기능 덕분에 Webpack은 이제 내지 된 중첩 특성에 대한 액세스를 추적 할 수 있습니다. Commonjs 트리 흔들림을 통해 사용하지 않는 CommonJS 수출을 제거 할 수 있습니다.

    최소 지원 Node.js 버전은 6에서 10.13.0 (LTS)으로 증가했습니다.

    코드베이스가 정리되었습니다. Webpack 4에서 더 이상 사용되지 않은 모든 항목을 제거했습니다.

    자동 Node.js Polyfills를 제거하십시오. 이전 버전의 Webpack에는 와 같은 Native Node.js 라이브러리 용 Polyfills가 포함됩니다. 많은 경우에, 그것들은 불필요하고 번들 크기를 크게 증가시킵니다. 그렇기 때문에 Webpack 5는 이러한 핵심 모듈을 자동으로 고정하고 프론트 엔드 호환 모듈에 중점을 둡니다.
    개발의 개선으로 WebPack 5를 사용하면 대상 목록을 전달하고 대상 버전을 지원할 수 있습니다. 대상 경로의 자동 결정을 제공합니다. 또한 자동적이고 고유 한 이름 지정을 제공하여 블록로드를 위해 동일한 글로벌 변수를 사용하여 여러 웹 팩 런타임 간의 충돌을 방지합니다.
    • 명령은 이제
    입니다.
    • 는 , 를 대체하는 리소스 모듈을 소개합니다.
    초보자 :
    • 이제 우리는 견고한 이론적 기초를 가지고 있습니다. 실제로 그것을 깨닫게합시다.

      먼저 새 디렉토리를 만들어 전환합니다. 그런 다음 새로운 프로젝트를 초기화합니다 :

      다음으로 웹 팩 및 웹 팩 클리를 로컬로 설치해야합니다 (명령 줄 인터페이스) :

      그러면 를 포함하도록 파일을 넣을 것입니다. 이제 개발 모드에서 웹 팩을 시작하기 위해 작업을 실행할 수 있습니다.

      앞에서 언급했듯이 Webpack은 기본 항목 지점을

      mkdir learn-webpack
      cd learn-webpack
      npm init -y

      로그인 후 복사
      로 설정하고 기본 출력을 <🎜 🎜>로 설정합니다. 따라서 작업을 실행할 때 Webpack이하는 일은 <🎜 🎜> 파일의 소스 코드를 가져 와서 최종 코드를 <🎜 🎜> 파일에 번들로 묶는 것입니다.

      올바른 출력을 받고 있는지 확인하려면 브라우저에 결과를 표시해야합니다. 이렇게하려면

      디렉토리에서

      npm install webpack webpack-cli --save-dev

      로그인 후 복사
      파일을 만들어 봅시다.

      이제 브라우저에서 파일을 열면 콘솔에 "hello, webpack!" src index.js <<> (공간 제한으로 인해 다음 내용이 간단히 요약되며 핵심 단계와 키 코드 스 니펫이 유지됩니다. 전체 자습서는 원본 텍스트를 참조하십시오.) <🎜 🎜> <<> html-webpack-plugin : console.log("Hello, Webpack!"); <🎜 🎜> 플러그인을 설치하고 구성하여 수동 수정을 피하기 위해 <🎜 🎜 🎜> 파일을 자동으로 생성하고 업데이트합니다. dev <🎜 🎜> <<> 사용자 정의 항목 및 출력 : <🎜

      <🎜

      npm run dev

      로그인 후 복사
      를 수정하고 항목 파일 및 출력 디렉토리 및 파일 이름을 사용자 정의하십시오.

      <🎜 🎜> <<> 최신 JavaScript를 ES5로 변환 : <🎜 ./src/index.js <🎜 🎜>를 구성하고 <🎜 🎜>를 구성하고 ES6 코드를 ES5 호환 코드로 변환합니다. ./dist/main.js <🎜 🎜> <<> 프로세싱 스타일 : <🎜 🎜> <🎜 🎜> 및 dev를 설치하고 <🎜 🎜>를 구성하고 CSS 파일을 페이지에 가져 와서 적용하십시오. index.js <🎜 🎜> <<> 리소스 관리 : <🎜 🎜> 웹 팩 5의 <🎜 main.js 내장 <🎜 🎜> 모듈을 사용하여 그림과 같은 리소스를 처리하십시오.

      <🎜 🎜> <<> WebPack-Dev-Server를 사용하여 개발을 가속화하십시오 :

      dist를 설치하고 구성하여 실시간 재 장전을 달성하십시오. index.html <🎜 🎜> <<> 출력 청소 :

      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">
          <title>Getting Started With Webpack</title>
        </head>
        <body>
          <🎜>
        </body>
      </html>

      로그인 후 복사
      를 사용하여 출력 디렉토리를 청소하십시오.
      결론 :

      이 튜토리얼은 Webpack의 핵심 개념 만 소개하는데, 이는 다른 많은 기능, 플러그인 및 다양한 기술을 제공합니다. 추가 연구를 위해 공식 문서 및 기타 학습 리소스를 참조하는 것이 좋습니다. WebPack FAQ (약어 버전) :

      웹 팩과 다른 모듈 패커의 차이점? WebPack에는 강력한 플러그인 시스템이 있으며 여러 파일 유형을 지원하며 코드 분할 기능이 있습니다.
      • 여러 환경에 맞게 웹 팩을 구성하는 방법은 무엇입니까? 다른 구성 파일을 생성하고 를 사용하여 구성을 병합하십시오. Webpack은 CSS를 어떻게 처리합니까? 사용
      및 .
      • 웹 팩의 핫 모듈 교체 (HMR)는 무엇입니까? 는 페이지를 완전히 새로 고치지 않고 런타임에 모듈을 업데이트 할 수 있습니다. 웹 팩 프로덕션 버전의 구성을 최적화하는 방법은 무엇입니까? 코드 압축, 트리 흔들림, 코드 세분화 등 webpack-merge
      바벨과 함께 웹 팩을 사용하는 방법은 무엇입니까?
      • 설치 및 구성. style-loader typeScript와 함께 웹 팩을 사용하는 방법은 무엇입니까? css-loader 설치
      또는 .
      • 이미지를 처리하기 위해 웹 팩을 사용하는 방법은 무엇입니까? 사용
      또는
      • (Webpack 5는 자산 모듈을 사용합니다). React와 함께 웹 팩을 사용하는 방법은 무엇입니까?
      사용 JSX를 처리하려면
      • 를 사용할 수 있습니다. 웹 팩 구성을 디버깅하는 방법은 무엇입니까? babel-loader 및
      옵션을 사용하여 오류 메시지 및 스택 추적을보십시오.
      • 이 약식 자습서가 웹 팩을 신속하게 시작하는 데 도움이되기를 바랍니다. 자세한 내용은 원본 텍스트를 참조하십시오.

위 내용은 웹 팩에 대한 초보자 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!