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

이 글에서는 webpack에 관한 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中注入一段标识，例如 ac601a84bdd9ec7b81aa524a2e2a51dc ,在 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은 ac601a84bdd9ec7b81aa524a2e2a51dc와 같은 태그를 html에 삽입하여 정적으로 저장됩니다. -plugin.속성, 스크립트 삽입
      🎜webpack-manifest-plugin을 사용하고 webpack-manifest-plugin을 구성하여 js 리소스의 차이점을 비교하고 교체할지 결정합니다. 캐시 스크립트도 작성해야 합니다
    🎜Cl 및 CD를 수행할 때 파일 스트림을 편집하여 정적 스크립트를 삽입하여 서버에 대한 부담을 줄이고 성능을 향상시킬 수도 있습니다
  🎜 플러그인 또는 html-webpack - 플러그인 및 기타 주기적 기능, 프런트엔드 정적 저장 스크립트를 동적으로 삽입

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引入进行静态分析，故而编译的时候正确判断到底加载了那些模块

  webpack이 영구 캐싱을 구현하는 방법

  • 서버는 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: 코드에 절대 표시되지 않는 세그먼트를 삭제합니다. 이는 webpack을 시작할 때 --optimize-minimize 매개변수를 추가하여 달성할 수 있습니다. 🎜🎜코드 분할: 라우팅 크기 또는 구성 요소에 따라 코드를 청크로 나누어 요청 시 로드할 수 있고 브라우저 캐시 활용🎜🎜공개 타사 라이브러리 추출: 공개 모듈을 추출하는 SplitChunksPlugin 플러그인. 브라우저 캐시를 활용하여 오랫동안 자주 변경할 필요가 없는 공개 코드를 캐시합니다. time🎜🎜웹팩 treeShaking 메커니즘의 원리
🎜treeShaking은 트리 쉐이킹 최적화라고도 합니다. , 이는 패키징 볼륨을 최적화하기 위해 더 많은 코드를 제외하고는 프로덕션 환경이 기본적으로 활성화되어 있습니다. 🎜🎜코드가 실행되지 않는 경우 불필요한 코드를 분석할 수 있습니다. 🎜🎜es6 모듈
🎜 ES6의 사양을 사용하세요. 모듈은 정적 분석을 도입하여 컴파일 시 어떤 모듈이 로드되는지 올바르게 결정🎜🎜프로그램 흐름을 정적으로 분석하여 사용되거나 참조되지 않는 모듈과 변수를 결정합니다. 해당 코드 original 주소 : https://juejin.cn/post/7002839760792190989 🎜🎜author : front-end_maverick_to rhino🎜🎜🎜 관련 튜토리얼 권장 사항 : "Webpack 시작 비디오 자습서"

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