>웹 프론트엔드 >JS 튜토리얼 >Webpack의 로더와 플러그인을 이해하는 방법

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

一个新手
一个新手원래의
2017-09-27 10:32:332044검색

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

로더의 경우 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으로 문의하세요.