[편집 및 공유] 웹팩 인터뷰 질문 일부 (답변 분석 포함)

Webpack에 대한 이해를 말해 보세요

1. Webpack이 무엇인가요?

webpack은 정적 모듈 번들러로, webpack은 애플리케이션에 필요한 모든 모듈을 포함하는 종속성 그래프를 반복적으로 구축한 다음 이러한 모듈을 하나 이상의 번들로 패키징합니다.

Webpack은 생산 라인과 같습니다. 소스 파일을 출력 결과로 변환하기 전에 일련의 처리 프로세스(로더)를 거쳐야 합니다. 이 생산 라인의 각 처리 프로세스에는 단일 책임이 있으며 여러 프로세스 간에 종속성이 있습니다. 현재 처리가 완료된 후에만 처리를 위해 다음 프로세스로 넘겨질 수 있습니다.
플러그인은 생산 라인에 삽입되어 특정 시간에 생산 라인의 리소스를 처리하는 기능과 같습니다. Webpack은 실행 프로세스 중에 이벤트를 브로드캐스트합니다. 플러그인은 관심 있는 이벤트만 수신하면 되며 이 생산 라인에 참여하여 생산 라인의 작동을 변경할 수 있습니다.

2. 패키징 프로세스/빌드 프로세스에 대해 이야기해 주실 수 있나요?
3. 프론트엔드 운영 최적화에 대해 이야기해 주실 수 있나요?

Webpack의 패키징 프로세스/패키징 원리/빌드 프로세스에 대해 말씀해 주세요.

webpack의 실행 프로세스는 직렬 프로세스이며, 그 워크플로우는 다양한 플러그인을 직렬로 연결하는 것입니다.

npx webpack 패키징 명령의 명령줄 실행 시작npx webpack打包命令开始
1.初始化编译参数:从配置文件和shell命令中读取与合并参数
2.开始编译:根据上一步得到的参数初始化Compiler对象，加载所有配置的Plugin，执行对象的 run 方法开始执行编译。
3.确定入口:根据配置中的 entry 找出所有的入口文件
4.编译模块:从入口文件触发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，然后递归本步骤直到所有入口依赖的文件都进行翻译。
5.完成模块编译:在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系图。
6.输出资源：根据依赖关系图，组装成一个个包含多个模块的Chunk，再把每个Chunk转化成一个单独的文件加入到输出列表，根据配置确定输出的路径和文件名，输出。

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑。

总结

• 初始化:从配置文件和shell命令中读取与合并参数，根据参数初始化Compiler实例，加载Plugin(注册所有配置的插件)，调用Compiler实例的run方法开始执行编译。

Compiler编译对象掌控者webpack生命周期，不执行具体的任务，只是进行一些调度工作。比如执行模块创建、依赖收集、分块、打包等
调用run之后，创建Compiltation实例，每次构建都会新创建一个Compiltation实例，包含了这次构建的基本信息
Webpack 1.컴파일 매개변수 초기화: 구성 파일 및 셸 명령에서 매개변수 읽기 및 병합

2.컴파일 시작 : 이전 단계에서 얻은 매개변수에 따라 Compiler 객체를 초기화하고, 구성된 모든 플러그인을 로드한 후, 객체의 run 메소드를 실행하여 컴파일을 시작합니다.

3. 항목 결정: 구성의 항목에 따라 모든 항목 파일을 찾습니다.

4. 컴파일 모듈: 항목 파일에서 트리거되고 구성된 모든 로더를 호출하여 모듈 번역을 수행한 다음 해당 모듈이 의존하는 모듈을 찾은 다음 모든 항목 종속 파일이 번역될 때까지 이 단계를 반복합니다.
• 5. 완전한 모듈 컴파일: 4단계에서 Loader를 사용하여 모든 모듈을 번역한 후 각 모듈의 최종 번역된 내용과 모듈 간의 종속성 다이어그램을 얻습니다.
6. 출력 리소스: 종속성 그래프에 따라 여러 모듈을 포함하는 청크로 조립한 다음 각 청크를 별도의 파일로 변환하여 출력 목록에 추가하고 구성에 따라 출력을 결정합니다. 경로 및 파일 이름, 출력.

위 프로세스에서 Webpack은 특정 시점에 특정 이벤트를 브로드캐스팅하고, 플러그인은 관심 있는 이벤트를 청취한 후 특정 로직을 실행합니다.

요약

초기화: 구성 파일 및 셸 명령에서 매개변수 읽기 및 병합, 매개변수에 따라 컴파일러 인스턴스 초기화, 플러그인 로드(구성된 모든 플러그인 등록), 컴파일러의 실행 메소드 호출 컴파일을 시작하는 인스턴스입니다.

컴파일러 컴파일 개체는 웹팩 수명 주기를 제어하며 특정 작업을 수행하지 않고 일부 예약 작업만 수행합니다. 예를 들어 모듈 생성, 종속성 수집, 청킹, 패키징 등을 수행합니다.

run을 호출한 후 Compiltation 인스턴스를 생성합니다. 각 빌드는 이 빌드 Webpack의 기본 정보가 포함된 새로운 Compiltation 인스턴스를 생성합니다. code>는 특정 시점에 특정 이벤트를 브로드캐스트하며, 플러그인은 관심 있는 이벤트를 청취한 후 특정 로직을 실행합니다.

컴파일: 항목에서 트리거되면 각 모듈이 해당 로더에 직렬로 호출되어 모듈을 변환한 다음 모듈이 의존하는 모듈을 찾아 재귀적으로 컴파일합니다.

파일 구문 분석을 시작하여 구성 파일(webpack.config.js)에 지정된 항목에서 AST 구문 트리를 구축합니다.

종속성 그래프에 따라 여러 모듈을 포함하는 청크로 조립하고 각각을 변환합니다. 파일 출력으로 청크합니다. 다른 항목은 다른 청크를 생성하며 동적 가져오기도 자체 청크를 생성합니다.

Webpack에서 로더의 역할은 무엇입니까/로더란 무엇입니까?

🎜Loader는 🎜webpack에서 여러 파일 형식을 처리하기 위해 제공되는 메커니즘입니다🎜. webpack은 JS와 JSON만 알고 있으므로 Loader는 다른 유형의 리소스를 전처리하는 번역기와 동일합니다. 🎜 모듈의 "소스 코드"를 변환하는 데 사용됩니다. 🎜 로더는 체인콜을 지원하며, 호출 순서는 오른쪽에서 왼쪽입니다. **체인의 각 로더는 이전에 처리된 리소스를 처리하고 결국 js 코드가 됩니다. 🎜 로더의 전처리 기능을 통해 JavaScript 생태계에 더 많은 기능을 제공할 수 있습니다. 🎜🎜🎜🎜🎜일반적인 로더는 무엇인가요? 🎜🎜🎜🎜less-loader: 더 적은 수의 파일을 CSS 파일로 컴파일🎜🎜🎜🎜개발 중에 개발 효율성을 높이기 위해 CSS 스타일을 작성하는 데 전처리기를 덜 사용하는 경우가 많습니다🎜

• css-loader: CSS 파일을 commonjs 모듈로 변환하고 이를 js에 로드합니다. 모듈의 내용은 스타일 문자열입니다.
• style-loader: 스타일 태그를 만들고, js의 스타일 리소스를 태그에 삽입합니다. , 그리고 헤드에 유효한 태그를 추가하세요
• ts-loader: Typescript 파일 패키징 및 컴파일

플러그인의 역할은 무엇인가요? /Plugin

Plugin이란 무엇입니까? 플러그인의 주요 목적은 패키징 최적화 및 코드 압축과 같이 로더로 달성할 수 없는 문제를 해결하는 것입니다.
플러그인이 로드된 후 플러그인에 의해 정의된 기능은 webpack 빌드 중 특정 시점에 트리거되어 webpack이 작업을 수행하도록 돕습니다. webpack에 대한 기능 확장을 구현합니다.

일반적인 플러그인은 무엇입니까?

• html-webpack-plugin은 기본적으로 html 리소스를 처리하고 패키징 출력을 위해 모든 리소스(js/css)를 자동으로 가져옵니다. -css-extract -plugin 패키지된 CSS는 js 파일에 있습니다. 이 플러그인은 CSS를 별도로 추출할 수 있습니다.
• clean-webpack-plugin 패키지할 때마다 CleanWebpackPlugin 플러그인이 자동으로 마지막 패키지를 삭제합니다.

Webpack 플러그인 실행 순서(로딩 메커니즘)?

Webpack의 로더와 플러그인의 차이점

웹팩은 생산 라인과 같다고 항상 말씀드리는데, 소스 파일을 출력으로 변환하기 전에 일련의 처리 과정(로더)을 거쳐야 합니다. 결과. 이 생산 라인의 각 처리 프로세스에는 단일 책임이 있으며 여러 프로세스 간에 종속성이 있습니다. 현재 처리가 완료된 후에만 처리를 위해 다음 프로세스로 넘겨질 수 있습니다.

플러그인은 생산 라인에 삽입되어 특정 시간에 생산 라인의 리소스를 처리하는 기능과 같습니다. Webpack은 실행 프로세스 중에 이벤트를 브로드캐스트합니다. 플러그인은 관심 있는 이벤트만 수신하면 되며 이 생산 라인에 참여하여 생산 라인의 작동을 변경할 수 있습니다.
또는 이전 요약을 사용하여 로더와 플러그인이 각각 무엇인지 설명하세요

실행 시간

1. 로더는 컴파일 단계에서 실행됩니다

2. 플러그인은 전체 주기에서 작동합니다


사용 방법 Loader

:1. 다운로드 2.

플러그인 사용: 1. 다운로드 2. 견적 3.

사용 Webpack은 어떤 최적화 방법을 사용했나요? 어떤 최적화 방법이 있나요?

웹팩을 사용하여 프런트엔드 성능을 최적화하는 방법은 무엇입니까? 문제는 제작 환경 최적화에 관한 것입니다. 웹팩 빌드 속도를 향상시키는 방법은 무엇입니까? 문제는 빌드 속도 최적화에 관한 것입니다

tree-shaking은 사용하지 않는 코드를 삭제하여 프런트 엔드 성능을 최적화하고 빌드 속도를 높입니다.

tree-shaking은 ES 모듈 사양을 기반으로 한 Dead Code Elimination 기술 패키징입니다. 패키징 과정에서 프로젝트에서 참조되지 않은 모듈을 감지 및 표시하고 참조되지 않은 모듈을 삭제하여 빌드 속도를 향상시키고 프로그램 실행 시간을 줄입니다.

트리 쉐이킹 사용 시 주의할 점은 무엇인가요?

1. 기본 기능. 2. 모듈 코드를 작성하려면 ES6 사양을 사용해야 합니다. ES6 모듈 종속성은 결정적이며 런타임 상태와 아무 관련이 없습니다.

3. 부작용이 있는 코드를 작성하지 마십시오. 예를 들어, 즉시 실행 함수를 작성했고, 함수에 외부 변수를 사용했습니다.

mode = production ，生产环境默认开启tree-shaking
부작용에 대하여

웹팩을 사용하여 프런트 엔드 성능을 최적화하는 방법은 무엇입니까?

코드 압축

• Load on Demand

코드 분할 분할 청크 - 최적화 구성 항목에서 구성됨

• 1 node__mudules의 코드를 청크 출력으로 별도로 패키징할 수 있습니다. jqury? )
2. 다중 항목 청크에 공용 파일이 있는지 자동으로 분석합니다. 있는 경우 별도의 청크로 패키징되며 반복적으로 패키징되지 않습니다. sub-packaging

일반적으로 node_module은 파일로 패키징됩니다.

DLL 기술을 사용하여 자주 업데이트되지 않는 프레임워크 및 라이브러리를 별도로 패키징하고 청크를 생성합니다.

• 지연 로드로 라우팅을 사용합니다.

모든 참조는 import() 함수 모듈에서 참조하는 코드는 별도의 패키지로 패키징되어 청크가 저장된 디렉터리에 배치됩니다. 브라우저가 이 코드 줄을 실행하면 자동으로 이 리소스를 요청하고 비동기 로딩을 구현합니다.

Webpack에서 압축 코드를 구성하는 방법은 무엇입니까? 압축이란 무엇입니까?

1. 최적화 구성 항목에서 플러그인을 압축용 압축기로 구성합니다.

2. 플러그인에서 압축하려면 이 플러그인을 사용하세요

js 압축: terser-webpack-plugin 사용

css 압축:optim-css-assets-webpack-plugin 플러그인 사용

콘솔, 댓글 삭제 , 공백, 줄 바꿈, 사용하지 않는 CSS 코드 등

웹팩 빌드 속도를 향상시키는 방법은 무엇입니까?

아이디어 1: 빌드해야 하는 파일 또는 코드 줄이기

• HMR(핫 모듈 교체) 모듈 핫 교체는 개발 환경에서 변경된 모듈만 다시 빌드합니다.
• 처리 범위 좁히기: 이를 합리적으로 사용합니다. 두 가지 속성 제외: 처리할 필요가 없는 파일 및 포함: 처리해야 하는 파일
• 바벨 캐시가 두 번째로 빌드되면 이전 캐시를 읽고 변경된 파일만 다시 빌드됩니다
• 하위 패키징에는 Dll 사용--> 편리한 하위 패키징 로드 필요

일반적으로 node_module은 파일로 패키징됩니다.
DLL 기술을 사용하면 자주 업데이트되지 않는 프레임워크 및 라이브러리를 별도로 패키징하여 생성할 수 있습니다. 덩어리
프로젝트 소스 코드도 분할해야 하며 경로를 기반으로 패키지 파일을 분할할 수 있습니다.-> 경로의 지연 로딩을 구현하는 방법은 무엇입니까? 웹팩에서 구성 요소의 비동기 로딩을 구현하는 방법은 무엇입니까?

아이디어 2: 더 많은 구성을 하세요

• 멀티 프로세스 패키징 스레드 로더, 시간이 많이 걸리는 로더 앞에 배치

프로세스 시작 및 프로세스 통신에 오버헤드가 있고 작업 시간이 상대적으로 길며, 따라서 여러 프로세스가 필요합니다. Packaging

【관련 권장 사항: javascript 비디오 튜토리얼, 프로그래밍 비디오】

위 내용은 [편집 및 공유] 웹팩 인터뷰 질문 일부 (답변 분석 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!