前端日记

面试官：说说webpack的热更新是如何做到的？原理是什么？ 一、是什么HMR 全称 Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用 例如，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会丢失 如果使用的是 HMR，就可以实现只将修改的模块实时替换至应用中，不必完全刷新整个应用 在webpack中配置开启热模块也非常的简单，如下代码： 123456789const webpack = require('webpack')module.exports = { // ... devServer: { // 开启 HMR 特性 hot: true // hotOnly: true }} 通过上述这种配置，如果我们修改并保存css文件，确实能够以不刷新的形式更新到页面中 但是，当我们修改并保存js文件之后，页面依旧自动刷新了，这里并没有触发热模块 所以，HMR 并不像 W ...

面试官：说说webpack中常见的Loader？解决了什么问题？ 一、是什么loader 用于对模块的”源代码”进行转换，在 import 或”加载”模块时预处理文件 webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。如下图所示： 在webpack内部中，任何文件都是模块，不仅仅只是js文件 默认情况下，在遇到import或者require加载模块的时候，webpack只支持对js 和 json 文件打包 像css、sass、png等这些类型的文件的时候，webpack则无能为力，这时候就需要配置对应的loader进行文件内容的解析 在加载模块的时候，执行顺序如下： 当 webpack 碰到不识别的模块的时候，webpack 会在配置的中查找该文件解析规则 关于配置loader的方式有三种： 配置方式（推荐）：在 webpack.config.js文件中指定 loader 内联方式：在每个 import 语句中显式指定 loader CLI 方式：在 shell 命令中指定它们 配置方式关于loader的配置，我们是写在 ...

面试官：说说Loader和Plugin的区别？编写Loader，Plugin的思路？ 一、区别前面两节我们有提到Loader与Plugin对应的概念，先来回顾下 loader 是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中 plugin 赋予了 webpack 各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决 loader 无法实现的其他事 从整个运行时机上来看，如下图所示： 可以看到，两者在运行时机上的区别： loader 运行在打包文件之前 plugins 在整个编译周期都起作用 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过Webpack提供的 API 改变输出结果 对于loader，实质是一个转换器，将A文件进行编译形成B文件，操作的是文件，比如将A.scss或A.less转变为B.css，单纯的文件转换过程 二、编写loader在编写 loader 前，我们首先需要了解 loader 的本质 其本质为函数，函数中的 this 作为上下文会 ...

面试官：说说webpack中常见的Plugin？解决了什么问题？ 一、是什么Plugin（Plug-in）是一种计算机应用程序，它和主应用程序互相交互，以提供特定的功能 是一种遵循一定规范的应用程序接口编写出来的程序，只能运行在程序规定的系统下，因为其需要调用原纯净系统提供的函数库或者数据 webpack中的plugin也是如此，plugin赋予其各种灵活的功能，例如打包优化、资源管理、环境变量注入等，它们会运行在 webpack 的不同阶段（钩子 / 生命周期），贯穿了webpack整个编译周期 目的在于解决loader 无法实现的其他事 配置方式这里讲述文件的配置方式，一般情况，通过配置文件导出对象中plugins属性传入new实例对象。如下所示： 123456789const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装const webpack = require('webpack'); // 访问内置的插件module.exports = ...

面试官：与webpack类似的工具还有哪些？区别？ 一、模块化工具模块化是一种处理复杂系统分解为更好的可管理模块的方式 可以用来分割，组织和打包应用。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体(bundle) 在前端领域中，并非只有webpack这一款优秀的模块打包工具，还有其他类似的工具，例如Rollup、Parcel、snowpack，以及最近风头无两的Vite 通过这些模块打包工具，能够提高我们的开发效率，减少开发成本 这里没有提及gulp、grunt是因为它们只是定义为构建工具，不能类比 RollupRollup 是一款 ES Modules 打包器，从作用上来看，Rollup 与 Webpack 非常类似。不过相比于 Webpack，Rollup 要小巧的多 现在很多我们熟知的库都都使用它进行打包，比如：Vue、React和three.js等 举个例子： 12345678910111213141516171819202122// ./src/messages.jsexport default { hi: 'Hey Guys, ...

面试官：说说webpack的构建流程? 一、运行流程webpack 的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条webpack机制中，去改变webpack的运作，使得整个系统扩展性良好 从启动到结束会依次执行以下三大步骤： 初始化流程：从配置文件和 Shell 语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数 编译构建流程：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理 输出流程：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统 初始化流程从配置文件和 Shell 语句中读取与合并参数，得出最终的参数 配置文件默认下为webpack.config.js，也或者通过命令的形式指定配置文件，主要作用是用于激活webpack的加载项和插件 关于文件配置内容分析，如下注释： 1234567891011121314151617 ...

面试官：如何提高webpack的构建速度？ 一、背景随着我们的项目涉及到页面越来越多，功能和业务代码也会随着越多，相应的 webpack 的构建时间也会越来越久 构建时间与我们日常开发效率密切相关，当我们本地开发启动 devServer 或者 build 的时候，如果时间过长，会大大降低我们的工作效率 所以，优化webpack 构建速度是十分重要的环节 二、如何优化常见的提升构建速度的手段有如下： 优化 loader 配置 合理使用 resolve.extensions 优化 resolve.modules 优化 resolve.alias 使用 DLLPlugin 插件 使用 cache-loader terser 启动多线程 合理使用 sourceMap 优化loader配置在使用loader时，可以通过配置include、exclude、test属性来匹配文件，接触include、exclude规定哪些匹配应用loader 如采用 ES6 的项目为例，在配置 babel-loader 时，可以这样： 1234567891011121314module.exports = & ...

面试官：说说如何借助webpack来优化前端性能？ 一、背景随着前端的项目逐渐扩大，必然会带来的一个问题就是性能 尤其在大型复杂的项目中，前端业务可能因为一个小小的数据依赖，导致整个页面卡顿甚至奔溃 一般项目在完成后，会通过webpack进行打包，利用webpack对前端项目性能优化是一个十分重要的环节 二、如何优化通过webpack优化前端的手段有： JS代码压缩 CSS代码压缩 Html文件代码压缩 文件大小压缩 图片压缩 Tree Shaking 代码分离 内联 chunk JS代码压缩terser是一个JavaScript的解释、绞肉机、压缩机的工具集，可以帮助我们压缩、丑化我们的代码，让bundle更小 在production模式下，webpack 默认就是使用 TerserPlugin 来处理我们的代码的。如果想要自定义配置它，配置方法如下： 123456789101112const TerserPlugin = require('terser-webpack-plugin')module.exports = { ... op ...

面试官：说说webpack proxy工作原理？为什么能解决跨域? 一、是什么webpack proxy，即webpack提供的代理服务 基本行为就是接收客户端发送的请求后转发给其他服务器 其目的是为了便于开发者在开发模式下解决跨域问题（浏览器安全策略限制） 想要实现代理首先需要一个中间服务器，webpack中提供服务器的工具为webpack-dev-server webpack-dev-serverwebpack-dev-server是 webpack 官方推出的一款开发工具，将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起 目的是为了提高开发者日常的开发效率，只适用在开发阶段 关于配置方面，在webpack配置对象属性中通过devServer属性提供，如下： 1234567891011121314151617// ./webpack.config.jsconst path = require('path')module.exports = { // ... devServer: { content ...

面试官：说说你对webpack的理解？解决了什么问题？ 一、背景Webpack 最初的目标是实现前端项目的模块化，旨在更高效地管理和维护项目中的每一个资源 模块化最早的时候，我们会通过文件划分的形式实现模块化，也就是将每个功能及其相关状态数据各自单独放到不同的 JS 文件中 约定每个文件是一个独立的模块，然后再将这些js文件引入到页面，一个script标签对应一个模块，然后调用模块化的成员 12<script src="module-a.js"></script><script src="module-b.js"></script> 但这种模块弊端十分的明显，模块都是在全局中工作，大量模块成员污染了环境，模块与模块之间并没有依赖关系、维护困难、没有私有空间等问题 项目一旦变大，上述问题会尤其明显 随后，就出现了命名空间方式，规定每个模块只暴露一个全局对象，然后模块的内容都挂载到这个对象中 12345window.moduleA = { method1: function ()
...