In diesem Artikel werden Ihnen 10 Interviewfragen zu Webpack vorgestellt. Suchen Sie nach Lücken und füllen Sie diese aus. Wie viele dieser zehn Interviewfragen können Sie richtig beantworten? Können Sie sie alle richtig verstehen?
Die Interviewfragen sind nur eine Einführung Um die Fragen schnell aufzufrischen, merken Sie sich diese einfach (der Interviewer wird Sie fragen, aber er ist möglicherweise nicht sehr ausführlich). code>Wenn Sie tiefgreifend verstehen möchten, müssen Sie immer noch viel Energie aufwenden code>；快速刷题就是背（面试官问你，但是他不一定很深入），想深入理解还是得花大量精力；
初始化参数：解析webpack配置参数，合并shell传入和webpack.config.js文件配置的参数,形成最后的配置结果；
开始编译：上一步得到的参数初始化compiler对象，注册所有配置的插件，插件 监听webpack构建生命周期的事件节点，做出相应的反应，执行对象的run方法开始执行编译；
确定入口：从配置的entry入口，开始解析文件构建AST语法树，找出依赖，递归下去；
编译模块：递归中根据文件类型和loader配置，调用所有配置的loader对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
完成模块编译并输出：递归完事后，得到每个文件结果，包含每个模块以及他们之间的依赖关系，根据entry或分包配置生成代码块chunk;
输出完成：输出所有的chunk到文件系统；
其实是自己开启了express应用，添加了对webpack编译的监听，添加了和浏览器的websocket长连接，当文件变化触发webpack进行编译并完成后，会通过sokcet消息告诉浏览器准备刷新。而为了减少刷新的代价，就是不用刷新网页，而是刷新某个模块，webpack-dev-server可以支持热更新，通过生成 文件的hash值来比对需要更新的模块，浏览器再进行热替换
服务端
客户端
1、webpack生态中存在多种计算hash的方式
hashchunkhashcontenthash Initialisierungsparameter: Analysieren Sie die Webpack-Konfigurationsparameter, führen Sie die von der Shell übergebenen und in der Datei webpack.config.js konfigurierten Parameter zusammen, um die zu bilden Endgültiges Konfigurationsergebnis; Kompilierung starten: Initialisieren Sie das Compilerobjekt mit den im vorherigen Schritt erhaltenen Parametern, registrieren Sie alle konfigurierten Plug-Ins, das Plug-In lauscht auf die Ereignisknoten von Der Webpack-Build-Lebenszyklus reagiert entsprechend und führt die Ausführungsmethode des Objekts aus, um die Kompilierung zu starten AST-Syntaxbaum, ermitteln Sie die Abhängigkeiten und gehen Sie rekursiv vor;
Kompilierungsmodul: Bei der Rekursion werden alle konfigurierten Loader-Paare entsprechend dem Dateityp und der Loader-Konfiguration aufgerufen Finden Sie dann die Module heraus, von denen das Modul abhängt, und wiederholen Sie dann diesen Schritt, bis alle eintragsabhängigen Dateien durch diesen Schritt verarbeitet wurden. 🎜🎜Modulkompilierung und -ausgabe abschließen : Nach Abschluss der Rekursion wird jedes Dateiergebnis erhalten, einschließlich jedes Moduls und der Abhängigkeiten zwischen ihnen, und der Codeblockblock wird entsprechend der Eintrags- oder Unterauftragskonfiguration generiert 🎜🎜Ausgabe abgeschlossen; code>: Ausgabe Alle Chunks werden in das Dateisystem übertragen; 🎜🎜🎜<h2 data-id="heading-2"><strong>Webpack-Hot-Update-Prinzip</strong></h2>🎜Tatsächlich <code>Öffnet die Express-Anwendung, fügt die Überwachung der Webpack-Kompilierung hinzu und fügt eine lange Websocket-Verbindung mit dem Browser hinzu. Wenn Dateiänderungen das Kompilieren und Abschließen des Webpacks auslösen, teilt <code> dem Browser mit, dass er sich über Sokcet-Nachrichten auf die Aktualisierung vorbereiten soll . Um die Kosten für die Aktualisierung zu senken, muss die Webseite nicht aktualisieren, aber aktualisiert ein Modul kann Hot-Updates durch Generieren des Hashs unterstützen Wert der Datei. Vergleichen Sie die Module, die aktualisiert werden müssen, und führen Sie dann einen Hot-Ersatz im Browser durch🎜🎜Server🎜Client🎜hash🎜chunkhash🎜contenthash 🎜 🎜🎜hash stellt den Hashwert dar, der bei jeder Webpack-Kompilierung generiert wird . Alle Dateien, die diese Methode verwenden, haben den gleichen Hash. Bei jedem Build berechnet das Webpack einen neuen Hash. Chunkhash wird basierend auf der Eintragsdatei und dem zugehörigen Block gebildet. Änderungen an einer bestimmten Datei wirken sich nur auf den Hash-Wert des damit verbundenen Blocks aus, haben jedoch keinen Einfluss auf die Content-Hash-Erstellung anderer Dateien basierend auf dem Dateiinhalt. Wenn sich der Dateiinhalt ändert, ändert sich auch der Inhaltshash🎜🎜2. Vermeiden Sie denselben Zufallswert🎜der Hash berechnet wurde. <code>Derselbe Zufallswert kann generiert werden, da diese Dateien zum selben Block gehören. Sie können eine Datei einem unabhängigen Block hinzufügen (z. B. indem Sie sie in einen Eintrag einfügen)
计算hash后分割chunk。产生相同随机值可能是因为这些文件属于同一个chunk,可以将某个文件提到独立的chunk（如放入entry）<% HtmlWebpackPlugin.options.loading.html %> ,在 html-webpack-plugin 中即可通过配置html属性，将script注入进去ProvidePlugin：自动加载模块，代替require和importhtml-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和CSShappypack：通过多进程模型，来加速代码构建clean-wenpack-plugin 清理每次打包下没有使用的文件speed-measure-webpack-plugin:可以看至U每个Loader和Plugin执行耗时（整个扌丁包耗时、每个Plugin和 Loader 耗时）webpack-bundle-analyzer:可视化Webpack输出文件的体积（业务组件、依赖第三方模块function MyWebpackPlugin()(
}；
// prototype 上定义 apply 方法
MyWebpackPlugin.prototype.apply=function(){
// 指定一个事件函数挂载到webpack
compiler.pluginCwebpacksEventHook"funcion (compiler)( console. log(“这是一个插件”)；
// 功能完成调用后webpack提供的回调函数
callback()
})file-loader：把文件输出到⼀个文件夹中，在代码中通过相对 URL 去引⽤输出的⽂件url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去source-map-loader：加载额外的 Source Map ⽂件，以⽅便断点调试image-loader：加载并且压缩图⽚⽂件babel-loader：把 ES6 转换成 ES5css-loader：加载 CSS，⽀持模块化、压缩、⽂件导⼊等特性style-loader🎜Bei der Konfiguration von Webpack können wir das HTML-Webpack-Plugin verwenden, um ein Skript einzufügen HTML zur Implementierung Drittanbieter- oder freigegebene Ressourcen werden statisch gespeichert, indem ein Tag in HTML eingefügt wird, z. B. <% HtmlWebpackPlugin.options.loading.html %>. Sie können HTML in HTML-Webpack konfigurieren -plugin. Attribut, fügen Sie das Skript einProvidePlugin: Module automatisch laden, Anforderungen ersetzen und importieren🎜html-webpack-plugin kann automatisch HTML-Code generieren auf Vorlagen und verweisen automatisch auf CSS- und JS-Dateien🎜extract-text-webpack-plugin Extrahieren Sie die in der JS-Datei referenzierten Stile in CSS-Dateien🎜DefinePlugin Konfigurieren Sie die globale Konfiguration zur Kompilierzeit. Variablen, die nützlich sind, um unterschiedliche Verhaltensweisen zwischen Builds im Entwicklungsmodus und im Release-Modus zu ermöglichen. 🎜<code>HotModuleReplacementPlugin Heißes Update🎜optimize-css-assets-webpack-plugin Doppeltes CSS in verschiedenen Komponenten kann schnell entfernt werden 🎜 webpack-bundle-analyzer Ein Tool zur Analyse von Webpack-Bundle-Dateien, das Bundle-Dateien in Form interaktiv zoombarer Baumkarten anzeigt. 🎜compression-webpack-plugin Die Produktionsumgebung kann gzip verwenden, um JS und CSS zu komprimieren🎜happypack: Beschleunigen Sie die Codekonstruktion durch einen Multiprozess model🎜clean-wenpack-plugin Bereinigt nicht verwendete Dateien in jedem Paket🎜speed-measure-webpack-plugin: Sie können jedes sehen Ausführungszeit jedes Loaders und Plugins (die Zeit des gesamten Pakets, die Zeit jedes Plugins und Loaders)🎜webpack-bundle-analyzer: Visualisieren Sie das Volumen der Webpack-Ausgabedateien (business Komponenten, basierend auf Modulen von Drittanbieternfile- Loader: Geben Sie die Datei in einem Ordner aus. Verweisen Sie über eine relative URL im Code auf die Ausgabedatei.🎜url-loader: Ähnlich wie File-Loader, kann es aber sein Wird verwendet, wenn die Datei sehr klein ist. Fügen Sie als Nächstes den Dateiinhalt im Base64-Format in den Code ein🎜source-map-loader: Laden Sie zusätzliche Source Map-Dateien, um das Debuggen von Haltepunkten zu erleichtern li>🎜image-loader: Bilddateien laden und komprimieren🎜babel-loader: ES6 in ES5 konvertieren🎜 css-loader : CSS laden, Modularisierung, Komprimierung, Dateiimport und andere Funktionen unterstützen🎜style-loader: CSS-Code durch DOM-Manipulation in JavaScript einfügen, um CSS zu laden.eslint-loader: JavaScript-Code über ESLint prüfeneslint-loader：通过 ESLint 检查 JavaScript 代码服务端设置http缓存头（cache-control）即作为splitChunk,因为他们几乎是不变的
延迟加载：使用import()方式，可以动态加载的文件分到独立的chunk,以得到自己的chunkhash保持hash值的稳定：编译过程和文件内通的更改尽量不影响其他文件hash的计算，对于低版本webpack生成的增量数字id不稳定问题，可用hashedModuleIdsPlugin基于文件路径生成解决⽤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插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码摇树优化，是一种通过移除多于代码，来优化打包体积的，生产环境默认开启。代码不运行的状态下，分析出不需要的代码；es6模块的规范静态分析，故而编译的时候正确判断到底加载了那些模块
Der Server legt den HTTP-Cache-Header fest (Cache-Kontrolle)d. h. als splitChunk, weil sie nahezu unverändert sind
Lazy Loading: Mithilfe der import()-Methode können dynamisch geladene Dateien in unabhängige Blöcke aufgeteilt werden, um ihren eigenen Chunkhash zu erhalten.
Behalten Sie die Stabilität des Hash-Werts bei: Änderungen im Kompilierungsprozess und der Dateikommunikation sollten sich nicht auf die Berechnung von Hashes anderer Dateien auswirken. Für das instabile Problem inkrementeller digitaler IDs, die von niedrigeren Versionen des Webpacks generiert werden, kann das hashedModuleIdsPlugin verwendet werden, um das Problem zu lösen zur DateipfadgenerierungWie optimiert man die Front-End-Leistung mit Webpack?
Die Verwendung von Webpack zur Optimierung der Front-End-Leistung bedeutet, die Ausgabeergebnisse von Webpack zu optimieren, sodass das endgültige gepackte Ergebnis schnell und effizient im Browser ausgeführt wird.
Code komprimieren: Löschen Sie redundanten Code, Kommentare, vereinfachen Sie das Schreiben von Code usw. Sie können UglifyJsPlugin und ParallelUglifyPlugin von Webpack verwenden, um JS-Dateien zu komprimieren, und cssnano (css-loader?minimize) verwenden, um CSS zu komprimierenCDN-Beschleunigung verwenden: Während des Erstellungsprozesses werden die referenzierten statischen Dateien komprimiert . Der Ressourcenpfad wird in den entsprechenden Pfad im CDN geändert. Sie können den Ausgabeparameter des Webpacks und den publicPath-Parameter jedes Loaders verwenden, um den Ressourcenpfad zu ändern
Tree Shaking: Löschen Sie Segmente, die nie im Code zu sehen sind. Dies kann erreicht werden, indem beim Starten des Webpacks der Parameter --optimize-minimize angehängt wird vollständig geladen sein. 🎜🎜Öffentliche Bibliotheken von Drittanbietern extrahieren: SplitChunksPlugin zum Extrahieren öffentlicher Module Zeit🎜🎜Das Prinzip des Webpack-TreeShaking-MechanismusTree-Shaking-Optimierung genannt . Abgesehen von mehr Code zur Optimierung des Verpackungsvolumens ist die Produktionsumgebung standardmäßig aktiviert. 🎜🎜Sie können den unnötigen Code analysieren, wenn der Code nicht ausgeführt wird. 🎜🎜Verwenden Sie die Spezifikationen des es6-Modulsstatische Analyse ein, sodass korrekt bestimmt, welche Module beim Kompilieren geladen werden🎜🎜den Programmablauf statisch analysiert, um festzustellen, welche Module und Variablen nicht verwendet oder referenziert werden corresponding code🎜🎜🎜🎜🎜🎜Original address: https://juejin.cn/post/7002839760792190989🎜🎜Author: Front-end_Maverick_to Rhino🎜🎜🎜Related tutorial recommendations: "🎜Webpack Getting Started Video Tutorial🎜" 🎜Das obige ist der detaillierte Inhalt von10 Webpack-Interviewfragen, wie viele können Sie beantworten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
