10 questions d'entretien webpack, à combien pouvez-vous répondre ?

Cet article partagera avec vous 10 questions d'entretien sur webpack. Vérifiez les lacunes et remplissez-les. À combien de ces dix questions d'entretien pouvez-vous répondre correctement ? Pouvez-vous les obtenir tous correctement ?

Les questions d'entretien ne sont qu'une introduction. Pour rafraîchir rapidement les questions, mémorisez-les simplement (l'intervieweur vous les posera, mais il ne sera peut-être pas très approfondi Si vous voulez comprendre en profondeur, vous devez quand même dépenser beaucoup d'énergie 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

  Quel est le processus de construction d'un webpack strong>

  • Paramètres d'initialisation : analysez les paramètres de configuration du webpack, fusionnez les paramètres transmis par le shell et configurés dans le fichier webpack.config.js pour former le résultat final de la configuration ;

• Démarrer la compilation : Initialisez l'objet compilateur avec les paramètres obtenus à l'étape précédente, enregistrez tous les plug-ins configurés, le plug-in écoute les nœuds d'événements de le cycle de vie de build du webpack, réagit en conséquence et exécute la méthode run de l'objet pour démarrer la compilation

• 🎜Déterminez l'entrée : à partir de l'entrée de configuration, commencez à analyser le fichier pour construire le ; Arbre de syntaxe AST, découvrez les dépendances et récursez ; 🎜🎜
• 🎜Module de compilation : Dans la récursivité, toutes les paires de chargeurs configurées sont appelées en fonction du type de fichier et de la configuration du chargeur. , puis recherchez les modules dont dépend le module, puis répétez cette étape jusqu'à ce que tous les fichiers dépendants de l'entrée aient été traités par cette étape 🎜🎜
• 🎜Compilation et sortie complètes du module : Une fois la récursion terminée, chaque résultat de fichier est obtenu, y compris chaque module et les dépendances entre eux, et le bloc de code est généré en fonction de la configuration d'entrée ou de sous-traitance 🎜🎜
• 🎜Sortie terminée ; > : Sortie Tous les morceaux sont transférés vers le système de fichiers ; 🎜🎜🎜

  Principe de mise à jour à chaud du Webpack

  🎜En fait, je a ouvert l'application express, ajoute la surveillance de la compilation du webpack et ajoute une longue connexion websocket avec le navigateur. Lorsque les modifications de fichiers déclenchent la compilation et l'achèvement du webpack, <code> indiquera au navigateur de se préparer à l'actualisation via les messages sokcet<.>. Afin de réduire le coût d'actualisation, <code> n'a pas besoin d'actualiser la page Web, mais actualise un module peut prendre en charge la mise à jour à chaud en générant le hachage. valeur du fichier. Comparez les modules qui doivent être mis à jour, puis effectuez un remplacement à chaud dans le navigateur🎜🎜Serveur🎜
  • Démarrez le serveur webpack-dev-server🎜
  • Créer une instance de webpack🎜
  • Créer un serveur serveur🎜
  • Ajouter le rappel d'événement terminé du webpack🎜
  • Envoyer un message au client une fois la compilation terminée🎜
  • Créer une application d'application express🎜
  • Définir le fichier système au système de fichiers mémoire🎜
  • Ajoutez un middleware webpack-dev -middleware🎜
  • Le middleware est responsable du renvoi du fichier généré🎜
  • Démarrez la compilation webpack🎜
  • Créez un serveur http et démarrez le service🎜Utilisez sockjs pour établir un websocket entre le navigateur et le serveur Connexion longue🎜
  • Créez un serveur socket🎜🎜🎜Client🎜
    • webpack-dev-server/client le fera écoutez ce message de hachage🎜
    • Le client le reçoit Après le message ok, la méthode reloadApp sera exécutée pour mettre à jour🎜
    • Dans reloadApp, il sera jugé si la mise à jour à chaud est prise en charge. Si elle est prise en charge, le webpackHotUpdate. L'événement se produira. S'il n'est pas pris en charge, le navigateur sera actualisé directement🎜
    • Dans webpack/hot/dev -server.js écoutera l'événement webpackHotUpdate🎜
    • La méthode module.hot.check sera appelée. dans la méthode de vérification🎜
    • HotModuleReplacement.runtime demande Manifest🎜
    • Appelée en appelant la méthode hotDownloadManifest de JsonpMainTemplate.runtime🎜
    • La méthode hotDownloadUpdateChunk de JsonpMainTemplate.runtime obtient le dernier code du module via une requête JSONP🎜
    • Le patch js est récupéré ou la méthode webpackHotUpdate de JsonpMainTemplate.runtime.js est appelée🎜
    • Ensuite, la méthode hotAddUpdateChunk de HotModuleReplacement.runtime.js est appelée pour la mise à jour dynamique Code du module🎜
    • Appelez ensuite la méthode hotApply pour la mise à jour à chaud 🎜🎜

      Le packaging Webpack est la façon dont le code de hachage est généré

      🎜1 Il existe de nombreuses façons de calculer le hachage dans l'écosystème webpack 🎜<. ul>
    • hash🎜
    • chunkhash🎜
    • contenthash 🎜 🎜🎜hash représente la valeur de hachage générée dans chaque compilation webpack . Tous les fichiers utilisant cette méthode ont le même hachage. Chaque build amène Webpack à calculer un nouveau hachage. Chunkhash est formé sur la base du fichier d'entrée et de son morceau associé. Les modifications apportées à un certain fichier n'affecteront que la valeur de hachage du morceau qui lui est associé, mais n'affecteront pas la création de contenu de hachage d'autres fichiers en fonction du contenu du fichier. Lorsque le contenu du fichier change, le contenthash change🎜🎜2 Évitez la même valeur aléatoire🎜.
      • webpack divise le morceau
  après calcul du hachage. <code>La même valeur aléatoire peut être générée car ces fichiers appartiennent au même bloc. Vous pouvez mentionner un fichier dans un bloc indépendant (par exemple en le plaçant dans une entrée)

<. h2 data-id="heading-4">Comment implémenter la mise en cache hors ligne des ressources statiques par 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🎜Lors de la configuration de Webpack, nous pouvons utiliser html-webpack-plugin pour injecter un script dans HTML à implémenter Les ressources tierces ou partagées sont stockées statiquement en injectant une balise dans le HTML, telle que ac601a84bdd9ec7b81aa524a2e2a51dc Vous pouvez configurer le HTML dans html-webpack. -plugin. Attribut, injectez-y le script
🎜Utilisez webpack-manifest-plugin et configurez webpack-manifest-plugin pour générer un fichier manifestjson pour comparer les différences dans les ressources js et décider de les remplacer. vous devez également écrire un script de cache 🎜Lorsque nous faisons Cl et CD, nous pouvons également injecter des scripts statiques en éditant le flux de fichiers pour réduire la pression sur le serveur et améliorer les performances🎜Nous pouvons personnaliser le plugin ou html-webpack -Plugin et autres fonctions périodiques, injectent dynamiquement un script de stockage statique frontal

Quels sont les plugins courants dans webpack

🎜🎜ProvidePlugin : charge automatiquement les modules, en remplaçant require et import🎜html-webpack-plugin peut générer automatiquement du code HTML basé sur sur les modèles, et référence automatiquement les fichiers css et js🎜extract-text-webpack-plugin Extrayez les styles référencés dans le fichier js dans des fichiers css🎜DefinePlugin Configurer la configuration globale au moment de la compilation. Variables, utiles pour autoriser différents comportements entre les builds en mode développement et en mode release. 🎜<code>HotModuleReplacementPlugin Mise à jour à chaud🎜optimize-css-assets-webpack-plugin Les CSS en double dans différents composants peuvent être rapidement supprimés 🎜 webpack-bundle-analyzer Un outil d'analyse de fichiers de bundle Webpack qui affiche les fichiers de bundle sous la forme de treemaps zoomables de manière interactive. 🎜compression-webpack-plugin L'environnement de production peut utiliser gzip pour compresser JS et CSS🎜happypack : accélère la construction de code grâce à un multi-processus model🎜clean-wenpack-plugin Nettoie les fichiers inutilisés dans chaque package🎜speed-measure-webpack-plugin : Vous pouvez voir chacun temps d'exécution de chaque Loader et Plugin (le temps de l'ensemble du package, le temps de chaque Plugin et Loader)🎜webpack-bundle-analyzer : Visualisez le volume des fichiers de sortie Webpack (business composants , s'appuyant sur des modules tiers

Comment implémenter le plug-in webpack

🎜🎜webpack est essentiellement un mécanisme de streaming d'événements. Module principal : tabable (Sync + Async) Hooks construct === Compilateur (compilation) + Compilation (créer des bundles) 🎜L'objet compilateur représente la configuration complète de l'environnement webpack. une fois au démarrage de webpack. et configurez tous les paramètres opérationnels, y compris les options, le chargeur et le plugin. Lors de l'application d'un plug-in dans l'environnement webpack, le plug-in recevra une référence à cet objet du compilateur et pourra l'utiliser pour accéder au principal. environnement de webpack. 🎜L'objet de compilation représente une version de ressource créée. Lors de l'exécution du middleware de l'environnement de développement webpack, une nouvelle compilation est créée chaque fois qu'une modification de fichier est détectée, générant ainsi un nouvel objet de compilation représentant la ressource de compilation actuelle. . Ressources du module, ressources compilées, fichiers modifiés et informations sur l'état des dépendances suivies. L'objet de compilation fournit également de nombreux rappels de synchronisation clés que le plug-in peut choisir lors d'un traitement personnalisé.🎜Créez une fonction de plug-in. . , définissez la méthode apply sur son prototype et spécifiez un hook d'événement de webpack lui-même🎜La fonction traite en interne les données spécifiques de l'instance interne de webpack🎜Une fois le traitement terminé, appelez la fonction de rappel. fourni par webpackrrreee

Quels sont les chargeurs couramment utilisés dans webpack

🎜🎜file- loader : Exportez le fichier vers Dans un dossier, référencez le fichier de sortie via une URL relative dans le code🎜url-loader : Similaire au chargeur de fichiers, mais peut être utilisé lorsque le fichier est très petit Ensuite, injectez le contenu du fichier dans le code au format base64🎜source-map-loader : chargez des fichiers de carte source supplémentaires pour faciliter le débogage des points d'arrêt li>🎜image-loader : charger et compresser des fichiers image🎜babel-loader : convertir ES6 en ES5🎜 css-loader  : chargez CSS, prenant en charge la modularisation, la compression, l'importation de fichiers et d'autres fonctionnalités🎜style-loader : injectez du code CSS dans JavaScript, via la manipulation DOM pour charger CSS.

eslint-loader : Vérifiez le code JavaScript via 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引入进行静态分析，故而编译的时候正确判断到底加载了那些模块

  Comment Webpack implémente la mise en cache persistante

  • Le serveur définit l'en-tête du cache http (cache-control)
  Emballez les dépendances et le runtime en différents morceaux, c'est-à-dire en tant que splitChunk, car ils sont presque inchangés

Chargement paresseux : à l'aide de la méthode import(), les fichiers chargés dynamiquement peuvent être divisés en morceaux indépendants pour obtenir leur propre chunkhash

Conserver la stabilité de la valeur de hachage : les modifications apportées au processus de compilation et à l'intercommunication des fichiers doivent essayer de ne pas affecter le calcul des hachages d'autres fichiers. Pour le problème instable des identifiants numériques incrémentiels générés par les versions inférieures du webpack, le hashedModuleIdsPlugin peut être utilisé pour résoudre le problème en fonction. sur la génération de chemin de fichier

Comment optimiser les performances front-end avec webpack ?

Utiliser Webpack pour optimiser les performances frontales signifie optimiser la sortie de Webpack afin que le résultat final emballé s'exécute rapidement et efficacement dans le navigateur.

Compresser le code : supprimer le code redondant, les commentaires, simplifier l'écriture du code, etc. Vous pouvez utiliser UglifyJsPlugin et ParallelUglifyPlugin de webpack pour compresser les fichiers JS, et utiliser cssnano (css-loader?minimize) pour compresser cssUtiliser l'accélération CDN : pendant le processus de construction, les fichiers statiques référencés seront compressés . Le chemin de la ressource est modifié par le chemin correspondant sur le CDN. Vous pouvez utiliser le paramètre de sortie de webpack et le paramètre publicPath de chaque chargeur pour modifier le chemin de la ressource

🎜Tree Shaking : supprimez les segments qui ne seront jamais vus dans le code. Ceci peut être réalisé en ajoutant le paramètre --optimize-minimize lors du démarrage de webpack🎜🎜Code Splitting : divisez le code en morceaux en fonction des dimensions ou des composants de routage, afin qu'il puisse être chargé à la demande et à en même temps, utilisez pleinement le cache du navigateur🎜🎜Extraire les bibliothèques publiques tierces : plug-in SplitChunksPlugin pour extraire les modules publics. Utilisez le cache du navigateur pour mettre en cache ces codes publics qui n'ont pas besoin d'être modifiés fréquemment pendant une longue période. time🎜🎜Le principe du mécanisme treeShaking du webpack
🎜treeShaking est également appelé optimisation du tremblement d'arbre . À l'exception de plus de code pour optimiser le volume de packaging, l'environnement de production est activé par défaut. 🎜🎜Vous pouvez analyser le code inutile lorsque le code n'est pas exécuté 🎜🎜Utilisez les spécifications du module es6
🎜 ES6 ; Le module introduit l'analyse statique, donc détermine correctement quels modules sont chargés lors de la compilation🎜🎜analyse statiquement le flux du programme pour déterminer quels modules et variables ne sont pas utilisés ou référencés. Supprimez ensuite le. " 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!