WebPack 입문 튜토리얼 상세-JS 튜토리얼-php.cn

이번에는 WebPack 입문 튜토리얼에 대해 자세히 소개하겠습니다. WebPack을 시작할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

1. 웹팩이란

WebPack은 모듈 패키저로 볼 수 있습니다. 프로젝트 구조를 분석하고, 브라우저가 직접 실행할 수 없는 JavaScript 모듈과 기타 확장 언어(Scss, TypeScript 등)를 찾아서 적절한 패키지로 패키징하는 것입니다. 브라우저에서 사용할 형식입니다.

2. WebPack을 사용하는 이유

오늘날 많은 웹 페이지는 실제로 기능이 풍부한 응용 프로그램으로 간주될 수 있습니다. 여기에는 복잡한 JavaScript 코드와 많은 종속성 패키지가 있습니다. 개발의 복잡성을 단순화하기 위해 프런트엔드 커뮤니티에는 많은 모범 사례가 등장했습니다

a:모듈화를 사용하면 복잡한 프로그램을 작은 파일로 세분화할 수 있습니다.

b: JavaScript 기반 개발 언어인 TypeScript와 유사합니다. 이를 통해 현재 버전의 JavaScript에서 직접 사용할 수 없는 기능을 구현할 수 있으며 나중에 브라우저가 인식할 수 있도록 JavaScript 파일로 변환할 수 있습니다. c:scss, less 및 기타 CSS 전처리기

.......

이러한 개선 사항은 실제로 개발 효율성을 크게 향상시켰지만 이를 사용하여 개발된 파일은 브라우저에서 인식되기 위해 추가 처리가 필요한 경우가 많으며 수동 처리는 매우 잠금 방지되어 WebPack과 같은 도구가 출현할 수 있는 기회를 제공합니다.

3. Grunt, Gulp와 비교했을 때 WebPack의 특징은 무엇인가요

실제로 Webpack은 다른 두 가지와 비교할 수 없습니다. Gulp/Grunt는 프런트 엔드 개발 프로세스를 최적화할 수 있는 도구인 반면 WebPack은 모듈식 솔루션입니다. 그러나 Webpack의 장점은 Webpack이 Gulp/Grunt를 대체할 수 있다는 것입니다. 그런트 같은 도구.

Grunt와 Gulp의 작동 방식은 다음과 같습니다.

구성 파일

에서 특정 파일에 대한 컴파일, 조합, 압축 등과 같은 작업을 수행하는 특정 단계를 지정하면 이 도구가 자동으로 이러한 작업을 완료할 수 있습니다. Webpack이 작동하는 방식은 주어진 기본 파일(예: index.js)을 통해 프로젝트를 전체적으로 처리하는 것입니다. Webpack은 이 파일에서 시작하여 프로젝트의 모든 종속 파일을 찾고 로더를 사용하여 이를 처리한 다음 마지막으로 브라우저에서 인식할 수 있는 JavaScript 파일로 패키지됩니다.

장점: 모듈성

웹팩의 눈에는 모든 것이 모듈입니다! 이는 CSS, 글꼴, 이미지 등을 포함한 JavaScript 코드를 포함하여 모두 적절한 로더를 통해서만 모듈로 처리될 수 있다는 점에서 필수적인 이점입니다.

1、CSS

webpack은 스타일 시트를 처리하기 위한 두 가지 도구인 CSS 로더와 스타일 로더는 서로 다른 작업을 처리하며, CSS 로더를 사용하면 @import 및 url(...)과 같은 메서드를 사용할 수 있습니다.

require

() 기능과 스타일 로더는 계산된 모든 스타일을 페이지에 추가합니다. 이 둘을 결합하면 웹팩으로 패키지된 JS 파일에 스타일 시트를 포함할 수 있습니다. 별도로 설치해야 함:

npm install --save-dev style-loader css-loader

2. CSS 모듈

지난 몇 년 동안 JavaScript는 새로운 언어 기능, 더 나은 도구, 더 나은 방법(예: 모듈화)을 통해 빠르게 발전했습니다. 모듈을 사용하면 개발자는 복잡한 코드를 종속성이 명확하게 정의된 작고 깔끔한 단위로 변환할 수 있으며 최적화 도구를 기반으로 종속성 관리 및 로드 관리를 자동으로 수행할 수 있습니다

그러나 프런트 엔드의 다른 부분에서는 CSS 개발이 상대적으로 느리고 대부분의 스타일 시트가 여전히 거대하고 전역 클래스 이름으로 가득 차 있어 유지 관리와 수정이 매우 어렵고 복잡해집니다.

최근에는 CSS 모듈이라는 것이 있습니다. 이 기술은 CSS 모듈을 통해 JS의 모듈식 사고를 CSS에 도입하기 위한 것입니다. 모든 클래스 이름과 애니메이션 이름은 기본적으로 현재 모듈에만 적용됩니다. Webpack은 처음부터 CSS 모듈성을 지원했습니다. 로더에서 구성한 후 필요한 위치에 "모듈"을 전달하기만 하면 됩니다. 그런 다음 CSS 클래스 이름을 구성 요소 코드에 직접 전달할 수 있습니다. 이는 현재 구성 요소에만 유효하므로 걱정할 필요가 없습니다. 다른 모듈에서 동일한 클래스 이름을 사용하면 발생할 수 있는 문제에 대해 설명합니다.

이렇게 하면 같은 클래스 이름이 서로 오염되지 않습니다

3. CSS 사전 컴파일

Sass 및 Less와 같은 전처리기는 변수, 중첩, 믹스인 등을 사용할 수 있는 기본 CSS의 확장입니다. CSS에 없는 상속 및 기타 기능을 사용하여 CSS 전처리기는 이러한 특수한 유형의 명령문을 브라우저가 인식할 수 있는 CSS 명령문으로 변환할 수 있습니다.

이제 익숙하실 겁니다. webpack에서 관련 로더를 사용하여 구성할 수 있습니다. 다음은 일반적으로 사용되는 CSS 처리 로더입니다

a:less-loader

b:sass-loader

c:스타일러스 로더

PostCSS 사용 방법과 같은 더 많은 기능으로 CSS를 사용할 수 있게 해주는 CSS 처리 플랫폼인 PostCSS도 있습니다. 우리는 PostCSS를 사용하여 다양한 브라우저에 적용되는 CSS 코드에 CSS 접두어를 자동으로 추가합니다.

먼저 postcss-loader 및 autoprefixer(접두사를 자동으로 추가하는 플러그인)를 설치하세요

npm install --save-dev postcss-loader autoprefixer

그리고 이를 webpack 구성 파일에 설정하면 다음과 같이 새 postcss 키워드를 생성하고 그 안에 종속 플러그인을 선언하기만 하면 됩니다. 이제 작성한 CSS는 Can i use의 데이터를 기반으로 다른 접두사를 자동으로 추가합니다. .

WebPack 입문 튜토리얼 상세

2. 웹팩-펄진

플러그인은 Webpack 기능을 확장하는 데 사용되며 전체 빌드 프로세스에 적용되고 관련 작업을 수행합니다.

로더와 플러그인은 종종 혼동되지만 실제로는 완전히 다른 것입니다. 로더는 플러그인을 패키징하고 빌드하는 과정에서 소스 파일(JSX, Scss, Less...)을 한 번에 하나씩 처리하는 데 사용된다고 할 수 있습니다. 한 번에 하나씩 처리됩니다. 단일 파일에서 직접 작동하지 않으며 전체 빌드 프로세스에 직접적인 영향을 미칩니다.

Webpack에는 많은 내장 플러그인과 타사 플러그인이 있어 더욱 풍부한 기능을 완성할 수 있습니다.

1. 플러그인을 사용하는 방법은 무엇입니까?

이 플러그인의 기능은 간단한 템플릿을 기반으로 최종 Html5 파일을 생성하는 데 도움을 주는 것입니다. 이 파일은 패키지된 JS 파일을 자동으로 참조합니다. 각 컴파일은 파일 이름에 다른 해시 값을 삽입합니다.

//설치

npm install --save-dev html-webpack-pugin

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요. !