웹팩 인터뷰 질문 10가지, 몇 개나 답할 수 있나요?-JS 튜토리얼-php.cn

이 글에서는 webpack에 관한 10가지 인터뷰 질문을 공유하겠습니다. 부족한 부분을 확인하고 채우세요. 이 10가지 인터뷰 질문 중 몇 개나 정답을 맞힐 수 있나요? 모두 올바르게 대답할 수 있나요?

웹팩 인터뷰 질문 10가지, 몇 개나 답할 수 있나요?

면접 질문은 단지 소개일 뿐입니다. 질문을 빠르게 복습하려면 그냥 외워두세요 (면접관이 물어보겠지만 별로 깊이가 없을 수도 있습니다). code>깊이 이해하려면 여전히 많은 에너지를 소비해야 합니다 code>;快速刷题就是背（面试官问你，但是他不一定很深入），想深入理解还是得花大量精力；

webpack 的构建流程是什么

初始化参数：解析webpack配置参数，合并shell传入和webpack.config.js文件配置的参数,形成最后的配置结果；
开始编译：上一步得到的参数初始化compiler对象，注册所有配置的插件，插件监听webpack构建生命周期的事件节点，做出相应的反应，执行对象的run方法开始执行编译；
确定入口：从配置的entry入口，开始解析文件构建AST语法树，找出依赖，递归下去；
编译模块：递归中根据文件类型和loader配置，调用所有配置的loader对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
完成模块编译并输出：递归完事后，得到每个文件结果，包含每个模块以及他们之间的依赖关系，根据entry或分包配置生成代码块chunk;
输出完成：输出所有的chunk到文件系统；

webpack 的热更新原理

其实是自己开启了express应用，添加了对webpack编译的监听，添加了和浏览器的websocket长连接，当文件变化触发webpack进行编译并完成后，会通过sokcet消息告诉浏览器准备刷新。而为了减少刷新的代价，就是不用刷新网页，而是刷新某个模块，webpack-dev-server可以支持热更新，通过生成文件的hash值来比对需要更新的模块，浏览器再进行热替换

服务端

启动 webpack-dev-server服务器
创建webpack实例
创建server服务器
添加webpack的done事件回调
编译完成向客户端发送消息
创建express应用app
设置文件系统为内存文件系统
添加 webpack-dev-middleware 中间件
中间件负责返回生成的文件
启动webpack编译
创建http服务器并启动服务
使用sockjs在浏览器端和服务端之间建立一个websocket长连接
创建socket服务器

客户端

webpack-dev-server/client端会监听到此hash消息
客户端收到ok消息后会执行reloadApp方法进行更新
在reloadApp中会进行判断，是否支持热更新，如果支持的话发生 webpackHotUpdate事件，如果不支持就直接刷新浏览器
在 webpack/hot/dev-server.js 会监听 webpackHotUpdate 事件
在check方法里会调用module.hot.check方法
HotModuleReplacement.runtime请求Manifest
通过调用 JsonpMainTemplate.runtime 的 hotDownloadManifest方法
调用JsonpMainTemplate.runtime的hotDownloadUpdateChunk方法通过JSONP请求获取最新的模块代码
补丁js取回来或会调用 JsonpMainTemplate.runtime.js 的 webpackHotUpdate 方法
然后会调用 HotModuleReplacement.runtime.js 的 hotAddUpdateChunk方法动态更新模块代码
然后调用hotApply方法进行热更

webpack 打包是hash码是如何生成的

1、webpack生态中存在多种计算hash的方式

hash
chunkhash
contenthash
웹팩 구축 과정은 무엇인가요 Strong>
- 초기화 매개변수: webpack 구성 매개변수를 구문 분석하고, 셸에서 전달되고 webpack.config.js 파일에 구성된 매개변수를 병합하여
컴파일 시작: 이전 단계에서 얻은 매개변수로 컴파일러 객체를 초기화하고, 구성된 모든 플러그인을 등록하고, 플러그인은 다음의 이벤트 노드를 수신합니다. webpack 빌드 라이프 사이클에 따라 반응하고 객체의 run 메소드를 실행하여 컴파일을 시작합니다.
🎜항목 결정: 구성 항목에서 파일 구문 분석을 시작합니다. AST 구문 트리, 종속성 확인 및 반복 🎜🎜
🎜컴파일 모듈: 재귀에서는 구성된 모든 로더 쌍이 파일 유형 및 로더 구성에 따라 호출됩니다. 그런 다음 모듈이 의존하는 모듈을 찾은 다음 모든 항목 종속 파일이 이 단계에서 처리될 때까지 이 단계를 반복합니다. 🎜🎜
🎜모듈 컴파일 및 출력 완료: 재귀가 완료된 후 각 모듈과 이들 사이의 종속성을 포함하여 각 파일 결과가 얻어지고 입력 또는 하도급 구성에 따라 코드 블록 청크가 생성됩니다. 🎜🎜
🎜출력 완료: 출력 모든 청크가 파일 시스템으로 전송됩니다. 🎜🎜🎜
Webpack의 핫 업데이트 원칙
🎜실제로 저는 Express 애플리케이션을 열고, webpack 컴파일 모니터링을 추가하고, 브라우저와의 긴 websocket 연결을 추가합니다. 파일 변경이 webpack을 트리거하여 컴파일 및 완료되면 <code>는 브라우저에 sokcet 메시지를 통해 새로 고침을 준비하라고 지시합니다. /코드>. 새로 고침 비용을 줄이기 위해 <code>는 웹 페이지를 새로 고칠 필요가 없지만 모듈을 새로 고침하면 해시를 생성하여 핫 업데이트를 지원할 수 있습니다. 업데이트가 필요한 모듈을 비교한 후 브라우저🎜🎜서버🎜
- webpack-dev-server 서버 시작🎜
- 웹팩 인스턴스 생성🎜
- 서버 서버 생성🎜
- 웹팩 완료 이벤트 콜백 추가🎜
- 컴파일 완료 후 클라이언트에 메시지 보내기🎜
- 고속 응용 프로그램 생성🎜
- 설정 파일 시스템을 메모리 파일 시스템에🎜
- webpack-dev -middleware 미들웨어 추가🎜
- 미들웨어는 생성된 파일을 반환하는 역할을 담당합니다🎜
- 웹팩 컴파일 시작🎜
- http 서버 생성 및 서비스 시작 🎜
- sockjs를 사용하여 브라우저와 서버 사이에 웹소켓 설정 긴 연결🎜
- 소켓 서버 만들기🎜🎜🎜클라이언트🎜
  - webpack-dev-server/ 클라이언트는 이 해시 메시지를 듣게 됩니다🎜
  - 클라이언트는 이를 수신합니다. ok 메시지 후 reloadApp 메소드가 실행되어 업데이트됩니다🎜
  - reloadApp에서는 핫 업데이트가 지원되는지 여부를 판단합니다. webpackHotUpdate 이벤트가 발생합니다. 지원되지 않으면 브라우저가 직접 새로 고쳐집니다.🎜
  - webpack/hot/dev -server.js에서 webpackHotUpdate 이벤트를 수신합니다.🎜
  - module.hot.check 메소드는 check 메소드에서 호출됩니다🎜
  - HotModuleReplacement.runtime이 Manifest를 요청합니다🎜
  - JsonpMainTemplate.runtime의 hotDownloadManifest 메소드를 호출하여 호출됩니다.🎜
  - JsonpMainTemplate.runtime의 hotDownloadUpdateChunk 메소드는 JSONP 요청을 통해 최신 모듈 코드를 얻습니다🎜패치 js가 검색되거나 JsonpMainTemplate.runtime.js의 webpackHotUpdate 메소드가 호출됩니다🎜
  - 그런 다음 HotModuleReplacement.runtime.js의 hotAddUpdateChunk 메소드가 동적 업데이트 모듈 코드를 위해 호출됩니다🎜
  - 그런 다음 hotApply 메소드를 호출하여 hot update🎜🎜
    웹팩 패키징이 해시 코드를 생성하는 방법
    🎜1 웹팩 생태계에서 해시를 계산하는 방법은 다양합니다 🎜
    - hash🎜
    - chunkhash🎜
    - contenthash 🎜 🎜🎜hash는 각 웹팩 컴파일에서 생성된 해시 값을 나타냅니다. 이 방법을 사용하는 모든 파일은 동일한 해시를 갖습니다. 각 빌드로 인해 webpack은 새로운 해시를 계산합니다. Chunkhash는 항목 파일 및 관련 청크를 기반으로 형성됩니다. 특정 파일을 변경하면 해당 청크의 해시 값에만 영향을 미치며 파일 내용을 기반으로 하는 다른 파일의 컨텐츠 해시 생성에는 영향을 미치지 않습니다. 파일 내용이 변경되면 내용 해시도 변경됩니다🎜🎜2. 동일한 임의 값을 피하세요🎜
      - webpack은 해시를 계산한 후 청크를 분할합니다. 이 파일들이 동일한 청크에 속하기 때문에 동일한 임의 값이 생성될 수 있습니다. 파일을 독립 청크에 언급할 수 있습니다(예: 항목에 넣기)
      정적 리소스의 webpack 오프라인 캐싱을 구현하는 방법计算hash后分割chunk。产生相同随机值可能是因为这些文件属于同一个chunk,可以将某个文件提到独立的chunk（如放入entry）
    webpack 离线缓存静态资源如何实现
    - 在配置webpack时，我们可以使用html-webpack-plugin来注入到和html一段脚本来实现将第三方或者共用资源进行静态化存储在html中注入一段标识，例如 <% HtmlWebpackPlugin.options.loading.html %> ,在 html-webpack-plugin 中即可通过配置html属性，将script注入进去
    - 利用 webpack-manifest-plugin 并通过配置 webpack-manifest-plugin ,生成 manifestjson 文件，用来对比js资源的差异，做到是否替换，当然，也要写缓存script
    - 在我们做Cl以及CD的时候，也可以通过编辑文件流来实现静态化脚本的注入，来降低服务器的压力，提高性能
    - 可以通过自定义plugin或者html-webpack-plugin等周期函数，动态注入前端静态化存储script
    webpack 常见的plugin有哪些
    - ProvidePlugin：自动加载模块，代替require和import
    - html-webpack-plugin可以根据模板自动生成html代码，并自动引用css和js文件
    - extract-text-webpack-plugin 将js文件中引用的样式单独抽离成css文件
    - DefinePlugin 编译时配置全局变量，这对开发模式和发布模式的构建允许不同的行为非常有用。
    - HotModuleReplacementPlugin 热更新
    - optimize-css-assets-webpack-plugin 不同组件中重复的css可以快速去重
    - webpack-bundle-analyzer 一个webpack的bundle文件分析工具，将bundle文件以可交互缩放的treemap的形式展示。
    - compression-webpack-plugin 生产环境可采用gzip压缩JS和CSS
    - happypack：通过多进程模型，来加速代码构建
    - clean-wenpack-plugin 清理每次打包下没有使用的文件
    - speed-measure-webpack-plugin:可以看至U每个Loader和Plugin执行耗时（整个扌丁包耗时、每个Plugin和 Loader 耗时）
    - webpack-bundle-analyzer:可视化Webpack输出文件的体积（业务组件、依赖第三方模块
    webpack 插件如何实现
    - webpack本质是一个事件流机制，核心模块：tabable(Sync + Async)Hooks 构造出 === Compiler(编译) + Compiletion(创建bundles)
    - compiler对象代表了完整的webpack环境配置。这个对象在启动webpack时被一次性建立，并配置好所有可操作的设置，包括options、loader和plugin。当在webpack环境中应用一插件时，插件将收到此compiler对象的引用。可以使用它来访问webpack的主环境
    - compilation对象代表了一次资源版本构建。当运行webpack开发环境中间件时，每当检测到一个文件变化，就会创建一个新的compilation,从而生成一个新的编译资源。一个compilation对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态的信息。compilation对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用
    - 创建一个插件函数，在其prototype上定义apply方法，指定一个webpack自身的事件钩子
    - 函数内部处理webpack内部实例的特定数据
    - 处理完成后，调用webpack提供的回调函数
```
function MyWebpackPlugin()(
}；
// prototype 上定义 apply 方法
MyWebpackPlugin.prototype.apply=function(){
// 指定一个事件函数挂载到webpack
compiler.pluginCwebpacksEventHook"funcion (compiler)( console. log(“这是一个插件”)；
// 功能完成调用后webpack提供的回调函数
callback()
})
```
    로그인 후 복사
    webpack有哪些常用的Loader
    - file-loader：把文件输出到⼀个文件夹中，在代码中通过相对 URL 去引⽤输出的⽂件
    - url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去
    - source-map-loader：加载额外的 Source Map ⽂件，以⽅便断点调试
    - image-loader：加载并且压缩图⽚⽂件
    - babel-loader：把 ES6 转换成 ES5
    - css-loader：加载 CSS，⽀持模块化、压缩、⽂件导⼊等特性
    - style-loader🎜webpack을 구성할 때 html-webpack-plugin을 사용하여 스크립트를 삽입할 수 있습니다. 타사 또는 공유 리소스를 구현하기 위한 html은 <% HtmlWebpackPlugin.options.loading.html %>와 같은 태그를 html에 삽입하여 정적으로 저장됩니다. -plugin.속성, 스크립트 삽입

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

🎜🎜ProvidePlugin: 자동으로 모듈 로드, require 및 import 대체🎜html-webpack-plugin은 자동으로 HTML 코드 기반 생성 가능 템플릿에서 CSS 및 js 파일을 자동으로 참조🎜extract-text-webpack-plugin js 파일에서 참조된 스타일을 CSS 파일로 추출🎜

DefinePlugin 컴파일 타임에 전역 구성을 구성합니다. 개발 모드와 릴리스 모드 빌드 간의 다양한 동작을 허용하는 데 유용한 변수입니다. 🎜<code>HotModuleReplacementPlugin

핫 업데이트🎜optimize-css-assets-webpack-plugin 다양한 구성 요소의 중복 CSS를 빠르게 제거할 수 있습니다. 🎜 webpack-bundle-analyzer 대화형으로 확대/축소 가능한 트리맵 형식으로 번들 파일을 표시하는 webpack 번들 파일 분석 도구입니다. 🎜compression-webpack-plugin 프로덕션 환경에서는 gzip을 사용하여 JS 및 CSS를 압축할 수 있습니다.🎜happypack: 다중 프로세스를 통해 코드 구성을 가속화합니다. model🎜clean-wenpack-plugin 각 패키지에서 사용하지 않는 파일을 정리합니다.🎜speed-measure-webpack-plugin: 각 패키지를 볼 수 있습니다. 각 로더 및 플러그인의 실행 시간(전체 패키지의 시간, 각 플러그인 및 로더의 시간)🎜webpack-bundle-analyzer: Webpack 출력 파일의 양을 시각화합니다(비즈니스 타사 모듈을 사용하는 구성 요소

웹팩 플러그인 구현 방법

🎜🎜webpack 본질적으로 이벤트 스트리밍 메커니즘입니다. 핵심 모듈: 테이블 가능(동기화 + 비동기) 후크 구성 === 컴파일러(컴파일) + 컴파일(번들 생성) 🎜컴파일러 개체는 전체 웹팩 환경 구성을 나타냅니다. webpack을 시작할 때 한 번 실행하고 옵션, 로더, 플러그인을 포함한 모든 작동 설정을 구성합니다. webpack 환경에서 플러그인을 적용하면 플러그인은 이 컴파일러 개체에 대한 참조를 수신하고 이를 사용하여 기본 개체에 액세스할 수 있습니다. webpack 환경. 🎜컴파일 개체는 리소스 버전 빌드를 나타냅니다. webpack 개발 환경 미들웨어를 실행할 때 파일 변경이 감지될 때마다 새 컴파일이 생성되어 현재 컴파일 리소스를 나타내는 새 컴파일 개체가 생성됩니다. . 리소스, 컴파일된 리소스, 변경된 파일 및 추적된 종속성 상태에 대한 정보 또한 컴파일 개체는 플러그인이 사용자 정의 처리를 수행할 때 선택할 수 있는 많은 주요 타이밍 콜백을 제공합니다.🎜플러그인 함수 만들기 . 프로토타입에 적용 메소드를 정의하고 webpack 자체의 이벤트 후크를 지정합니다.🎜함수는 webpack 내부 인스턴스의 특정 데이터를 내부적으로 처리합니다.🎜처리가 완료된 후 콜백 함수를 호출합니다. webpack에서 제공rrreee

webpack에서 일반적으로 사용되는 로더는 무엇입니까

🎜🎜file- 로더: 파일을 출력합니다. 폴더에서 코드의 상대 URL을 통해 출력 파일을 참조합니다.🎜url-loader: 파일 로더와 유사하지만 다음과 같을 수 있습니다. 파일이 매우 작을 때 사용됩니다. 다음으로 파일 내용을 base64 형식의 코드에 삽입합니다.🎜source-map-loader: 중단점 디버깅을 용이하게 하기 위해 추가 소스 맵 파일을 로드합니다. li>🎜image-loader: 이미지 파일 로드 및 압축🎜babel-loader: ES6를 ES5로 변환🎜 css-loader : CSS 로드, 모듈화, 압축, 파일 가져오기 및 기타 기능 지원🎜style-loader: CSS 로드를 위한 DOM 조작을 통해 JavaScript에 CSS 코드를 삽입합니다.

eslint-loader: ESLinteslint-loader：通过 ESLint 检查 JavaScript 代码

webpack如何实现持久化缓存

服务端设置http缓存头（cache-control）
打包依赖和运行时到不同的chunk，即作为splitChunk,因为他们几乎是不变的
延迟加载：使用import()方式，可以动态加载的文件分到独立的chunk,以得到自己的chunkhash
保持hash值的稳定：编译过程和文件内通的更改尽量不影响其他文件hash的计算，对于低版本webpack生成的增量数字id不稳定问题，可用hashedModuleIdsPlugin基于文件路径生成解决

如何webpack来优化前端性能？

⽤webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运⾏快速⾼效。

压缩代码：删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS件，利⽤ cssnano （css-loader?minimize）来压缩css
利⽤CDN加速: 在构建过程中，将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对于 output 参数和各loader的 publicPath 参数来修改资源路径
Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 --optimize-minimize 来实现
Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存
提取公共第三⽅库: SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码

webpack treeShaking机制的原理

treeShaking 也叫摇树优化，是一种通过移除多于代码，来优化打包体积的，生产环境默认开启。
可以在代码不运行的状态下，分析出不需要的代码；
利用es6模块的规范
- ES6 Module引入进行静态分析，故而编译的时候正确判断到底加载了那些模块
- 서버는 http 캐시 헤더를 설정(cache-control)합니다
패키지 종속성과 런타임을 다른 청크로 즉, 거의 변경되지 않기 때문에 SplitChunk로 설정합니다

지연 로딩: import() 메서드를 사용하면 동적으로 로드된 파일을 독립적인 청크로 나누어 자체 청크 해시를 얻을 수 있습니다.

해시 값 안정성 유지: 컴파일 프로세스 및 파일 상호 통신의 변경은 다른 파일의 해시 계산에 영향을 주지 않도록 노력해야 합니다. 낮은 버전의 webpack에서 생성된 증분 디지털 ID의 불안정한 문제의 경우 hashedModuleIdsPlugin을 사용하여 문제를 해결할 수 있습니다. 파일 경로 생성

webpack으로 프런트엔드 성능을 최적화하는 방법은 무엇입니까?
webpack을 사용하여 프런트 엔드 성능을 최적화한다는 것은 최종 패키지 결과가 브라우저에서 빠르고 효율적으로 실행되도록 webpack의 출력 결과를 최적화하는 것을 의미합니다.

코드 압축: 중복된 코드, 주석 삭제, 코드 작성 단순화 등 webpack의 UglifyJsPlugin 및 ParallelUglifyPlugin을 사용하여 JS 파일을 압축하고 cssnano(css-loader?minimize)를 사용하여 css를 압축할 수 있습니다CDN 가속 사용: 빌드 프로세스 중에 참조된 정적 파일이 압축됩니다. . 리소스 경로가 CDN의 해당 경로로 수정됩니다. webpack의 출력 매개변수와 각 로더의 publicPath 매개변수를 사용하여 리소스 경로를 수정할 수 있습니다

Tree Shaking

코드 분할

공개 타사 라이브러리 추출

웹팩 treeShaking 메커니즘의 원리

트리 쉐이킹 최적화

프로덕션 환경이 기본적으로 활성화되어 있습니다

코드가 실행되지 않는

불필요한 코드

es6 모듈

정적 분석

컴파일 시 어떤 모듈이 로드되는지 올바르게 결정

위 내용은 웹팩 인터뷰 질문 10가지, 몇 개나 답할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!