Webpack의 로더와 플러그인을 이해하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Webpack의 로더와 플러그인을 이해하는 방법

一个新手

Sep 27, 2017 am 10:32 AM

plugin webpack

웹팩의 로더와 플러그인의 두 가지 개념은 초보자가 쉽게 혼동하기 쉽습니다. 여기서는 제가 이해한 것에 대해 간략하게 설명하겠습니다.

로더의 경우 A 파일을 B 파일로 컴파일하는 변환기입니다. 여기서 작동하는 것은 A.scss 또는 A.less를 B.css로 변환하는 간단한 파일 변환 프로세스입니다.

플러그인의 경우, wepack 자체를 풍성하게 하는 익스텐더로, webpack 패키징 전 과정에서 파일을 직접 조작하지는 않지만, 이벤트 메커니즘을 기반으로 작동하고, webpack 패키징 프로세스를 모니터링합니다.

run：开始编译
make：从entry开始递归分析依赖并对依赖进行build
build-moodule：使用loader加载文件并build模块
normal-module-loader：对loader加载的文件用acorn编译，生成抽象语法树AST
program：开始对AST进行遍历，当遇到require时触发call
require:事件
seal：所有依赖build完成，开始对chunk进行优化（抽取公共模块、加hash等）
optimize-chunk-assets：压缩代码
emit：把各个chunk输出到结果文件

로그인 후 복사

과 같은 노드는 노드를 모니터링하여 파일을 적절하게 처리하는 데 적합한 노드를 찾습니다.

위 내용은 Webpack의 로더와 플러그인을 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7548

Cakephp 튜토리얼

1382

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

VUE3 시작하기 튜토리얼: Webpack을 사용한 패키징 및 빌드 Jun 15, 2023 pm 06:17 PM

Vue는 대화형의 효율적인 웹 애플리케이션을 신속하게 구축하는 데 도움이 되는 탁월한 JavaScript 프레임워크입니다. Vue3은 Vue의 최신 버전으로, 많은 새로운 특징과 기능을 도입했습니다. Webpack은 현재 프로젝트의 다양한 리소스를 관리하는 데 도움이 되는 가장 인기 있는 JavaScript 모듈 패키저 및 빌드 도구 중 하나입니다. 이 기사에서는 Webpack을 사용하여 Vue3 애플리케이션을 패키징하고 빌드하는 방법을 소개합니다. 1. 웹팩 설치

VITE와 웹팩의 차이점은 무엇입니까 Jan 11, 2023 pm 02:55 PM

차이점: 1. 웹팩 서버의 시작 속도는 Vite의 시작 속도보다 느립니다. Vite는 시작할 때 패키징할 필요가 없고 모듈 종속성을 분석하고 컴파일할 필요가 없으므로 시작 속도가 매우 빠릅니다. 2. Vite 핫 업데이트는 Vite의 HRM 측면에서 webpack보다 빠릅니다. 특정 모듈의 내용이 변경되면 브라우저가 모듈을 다시 요청하게 됩니다. 3. Vite는 esbuild를 사용하여 종속성을 사전 구축하는 반면 webpack은 노드를 기반으로 합니다. 4. Vite의 생태계는 웹팩만큼 좋지 않으며, 로더와 플러그인도 충분히 풍부하지 않습니다.

모듈식 개발에 PHP와 웹팩을 사용하는 방법 May 11, 2023 pm 03:52 PM

웹 개발 기술이 지속적으로 발전하면서 프론트엔드와 백엔드 분리, 모듈화 개발이 보편화된 추세가 되었습니다. PHP는 일반적으로 사용되는 백엔드 언어입니다. 모듈식 개발을 수행할 때 모듈을 관리하고 패키징하려면 몇 가지 도구를 사용해야 합니다. Webpack은 사용하기 매우 쉬운 모듈식 패키징 도구입니다. 이 글에서는 모듈 개발을 위해 PHP와 웹팩을 사용하는 방법을 소개합니다. 1. 모듈형 개발이란 무엇입니까? 모듈형 개발은 프로그램을 서로 다른 독립적인 모듈로 분해하는 것을 의미합니다.

webpack은 es6을 es5 모듈로 어떻게 변환합니까? Oct 18, 2022 pm 03:48 PM

구성 방법: 1. 가져오기 방법을 사용하여 ES6 코드를 패키지된 js 코드 파일에 넣습니다. 2. npm 도구를 사용하여 babel-loader 도구를 설치합니다. 구문은 "npm install -D babel-loader @babel/core"입니다. @babel/preset-env"; 3. babel 도구의 구성 파일 ".babelrc"를 생성하고 트랜스코딩 규칙을 설정합니다. 4. webpack.config.js 파일에서 패키징 규칙을 구성합니다.

Spring Boot 및 Webpack을 사용하여 프런트엔드 프로젝트 및 플러그인 시스템 구축 Jun 22, 2023 am 09:13 AM

최신 웹 애플리케이션의 복잡성이 계속 증가함에 따라 우수한 프런트엔드 엔지니어링 및 플러그인 시스템을 구축하는 것이 점점 더 중요해지고 있습니다. Spring Boot와 Webpack의 인기로 인해 프런트엔드 프로젝트와 플러그인 시스템을 구축하기 위한 완벽한 조합이 되었습니다. SpringBoot는 최소한의 구성 요구 사항으로 Java 애플리케이션을 생성하는 Java 프레임워크입니다. 개발자가 웹 애플리케이션을 더 빠르고 쉽게 구축하고 배포할 수 있도록 자동 구성과 같은 많은 유용한 기능을 제공합니다. 여

플러그인은 어떤 폴더인가요? May 05, 2023 pm 02:53 PM

플러그인은 특정 표준 응용 프로그램 인터페이스에 따라 작성된 프로그램인 플러그인을 의미합니다. 이는 프로그램이 지정한 시스템 플랫폼에서만 실행할 수 있으며 플러그인이 필요하기 때문에 지정된 플랫폼에서 독립적으로 실행할 수는 없습니다. 함수 라이브러리나 데이터를 제공하기 위해 원래의 순수 시스템을 호출합니다.

webpack 패키지를 볼 수 있는 파일은 무엇입니까? Dec 20, 2022 pm 07:44 PM

vue에서 webpack은 js, css, picture, json 및 기타 파일을 브라우저 사용에 적합한 형식으로 패키징할 수 있으며, webpack에서는 js, css, picture, json 및 기타 파일 형식을 모듈로 사용할 수 있습니다. webpack에 포함된 다양한 모듈 리소스를 하나 이상의 패키지로 패키징하여 병합할 수 있으며 패키징 과정에서 이미지 압축, scss를 css로 변환, ES6 구문을 ES5로 변환 등의 리소스 처리가 가능합니다. html 파일 형식으로 인식됩니다.