背上花里胡哨的书包准备面试之webpack篇（+一些常问的面试题）

夏大爷耶耶耶

已于 2023-08-21 15:40:55 修改

阅读量819

点赞数 2

分类专栏：面试题文章标签： webpack 前端 node.js 前端面试

于 2023-08-10 17:42:39 首次发布

本文链接：https://blog.csdn.net/xy_is_fhh/article/details/132214977

版权

面试题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

npm install 后跟的参数--save、-g、--dev三者区别？

代码规范？

react组件封装思路？

webpack理解？

Webpack 是一个现代的静态模块打包工具。它是一个基于配置的构建工具，用于将多个模块（包括 JavaScript、样式表、图像等）打包成一个或多个 bundle，并提供了一种优化资源加载和管理的方式。

主要概念和工作原理：

入口（Entry）：Webpack 通过指定一个入口文件来开始构建过程。入口可以是单个文件或多个文件，Webpack 将从入口文件开始分析依赖关系树。

输出（Output）：Webpack 会将打包后的资源输出到指定目录。输出通常是一个或多个 bundles，其中包含被 chunk 包裹的模块。

模块（Module）：Webpack 将项目中的所有文件视为模块。每个模块都有自己的类型（JavaScript、CSS、图片等），Webpack 根据不同的类型使用对应的 loader 进行处理。

Loader：Loader 是用于对不同类型的模块进行处理和转换的插件。例如，Babel Loader 可以将 ES6/ES7 代码转换为浏览器可识别的 ES5 代码。

插件（Plugin）：插件是用于扩展 Webpack 功能的组件。可以用插件来处理更复杂的任务，如生成 HTML 文件、压缩代码等。

开发服务器（DevServer）：Webpack 提供了一个开发服务器，用于在开发过程中实时更新修改后的代码，并提供热模块替换功能。

模式（Mode）：Webpack 提供了三种模式，分别是开发模式、生产模式和 none 模式。每种模式都有对应的配置，用于优化构建结果。

通过配置文件（通常是 webpack.config.js），开发人员可以定义入口、输出、loader、插件等来自定义项目的打包流程。Webpack 会根据配置文件的设置进行相应的处理和优化，最终生成可部署到生产环境的静态资源。

Webpack 的强大之处在于其模块化能力、灵活性和可扩展性。它可以处理多样化的资源类型并支持各种优化策略，使得前端项目的构建变得高效和可控。

webpack构建流程？

Webpack 的构建流程可以概括为以下几个步骤：

解析配置文件：Webpack 会根据项目根目录下的配置文件（默认为 webpack.config.js）来获取构建相关的配置选项。

解析入口文件：Webpack 根据配置文件中指定的入口文件路径，开始解析入口文件及其依赖关系。

加载模块：Webpack 使用不同的 loader 来处理不同类型的模块。在解析过程中，Webpack 会递归地加载和解析模块的依赖关系，并将它们加入到构建过程中。

插件执行：Webpack 在构建过程中提供了许多插件扩展的机会。插件可以用于执行各种任务，如优化、压缩、代码分割等。Webpack 会按顺序执行这些插件，并根据需要对模块和资源进行转换和处理。

输出文件：在构建完成后，Webpack 将生成的文件输出到指定的目录。输出的文件通常是一个或多个 bundle，包含了被 chunk 包裹的模块。

优化策略：Webpack 提供了一系列的优化策略，以提高构建结果的性能和体积。例如，代码压缩、Tree Shaking（消除未使用代码）、代码分割以及缓存等。

开发服务器：在开发过程中，Webpack 提供了一个开发服务器（DevServer），用于实时更新修改后的代码，并提供热模块替换功能。它能够在内存中构建和提供资源，加快开发效率。

整个流程中，Webpack 会根据配置文件的设置来确定入口文件、输出路径、加载器和插件等。在每个步骤中，Webpack 会使用各个加载器处理不同类型的模块，再通过插件对资源进行转换和优化。最终，Webpack 将生成的静态资源输出到指定目录，可用于部署到生产环境。

需要注意的是，该构建流程可以根据具体的配置和需求进行调整和扩展，以满足项目的需求。

loader解决什么问题？

用于解决模块的转换和加载问题。它们可以将不同类型的资源（如 JavaScript、CSS、图片等）转换为可在浏览器中直接使用的形式。

plugin解决什么问题？

用于解决一些特定的问题或实现额外的功能。它们可以在构建过程中介入，并对资源进行处理、优化和管理。

编写loader和plugin的思路？

编写 Loader 的思路：

1.了解要处理的文件类型和需要实现的功能。

2.创建一个 JavaScript 模块，该模块会导出一个函数作为 Loader 函数。

3.在 Loader 函数中，接收源文件内容作为参数，并对其进行处理和转换。

4.根据需求，可以使用现有的工具库或自己编写代码来完成转换逻辑。

5.最后，通过返回转换后的结果，将其传递给 Webpack 构建流程。

编写 Plugin 的思路：

1.确定插件的目的和功能。

2.创建一个 JavaScript 类，该类定义了插件的行为和配置选项。

3.在类中，实现 Webpack 插件接口（通常是 apply 方法），并在该方法中执行插件的逻辑。

4.在插件逻辑中，可以监听特定的构建事件，如文件生成、模块解析、编译完成等，并在这些事件发生时执行相应的操作。

5.根据需要，可以向构建过程中注入额外的资源、修改输出文件、优化代码等。

6.最后，将插件的实例添加到 Webpack 配置的 plugins 属性中，使其生效。

webpack热更新？

Webpack 热更新（Hot Module Replacement，HMR）是 Webpack 提供的一项功能，用于在开发过程中实时更新修改后的代码，而无需完全刷新页面。

热更新的工作原理如下：

在启动开发服务器（DevServer）时，Webpack 会将 HMR 相关的代码注入到构建结果中。

当文件发生改变时，Webpack 可以通过 WebSocket 和开发服务器进行通信，通知浏览器重新加载被修改的模块。

浏览器接收到更新通知后，使用新的模块替换旧的模块，只对有变化的部分进行替换，而不刷新整个页面。

要使用热更新，在 Webpack 配置中需要进行以下配置：

开启热更新功能：在配置中设置 hot: true。

使用 webpack-dev-server 插件来启动开发服务器，并设置 hot: true。

对于样式表，可以使用 style-loader 来自动应用样式的更新，无需手动刷新。

对于 JavaScript 模块，需要在入口文件中添加适当的代码，以便让 Webpack 监听模块的更新并触发热更新。

实际上，大多数的现代前端框架（如 React、Vue 等）已经集成了热更新功能，并且提供了相关的开发工具和插件来简化配置和使用。

热更新可以大幅提高开发效率，因为它使得在修改代码后无需手动刷新页面即可查看到变化。然而，需要注意的是，热更新仅适用于开发环境，不应部署到生产环境中。在生产环境中，应该生成优化过的静态资源供用户访问。

如何提高webpack的构建速度？

1使用更快的构建工具：升级 Node.js 版本和 Webpack 版本，以获得对构建性能的改进。

2合理配置 entry 和 output：根据项目需求，合理配置入口文件和输出目录，避免不必要的资源扫描和输出。

3使用缓存：使用 Webpack 的缓存机制（如 cache-loader 插件）以及 Babel 的缓存配置，以便在重新构建时复用之前的结果，减少重复工作。

4只处理必要的文件：通过配置 include 和 exclude 选项来限制 loader 和 plugin 的处理范围，只处理必要的文件。

5模块热替换（HMR）：在开发环境中启用 HMR，可以使修改后的模块实时生效，而无需完全重新构建。

6使用 HappyPack 或 thread-loader：将构建任务并发执行，利用多核 CPU 加速构建过程。

7减小文件体积：通过代码拆分、Tree Shaking、压缩等方式减小文件体积，减少网络传输时间。

8懒加载：对于大型应用或页面，使用懒加载技术（如动态导入）延迟加载非必要的资源。

9优化 loader 和 plugin：选择高效的 loader 和 plugin，避免使用过度复杂或低效的工具。

10使用 DLL（动态链接库）：将不经常变化的第三方库打包成 DLL，以减少构建时间。

11开启并行压缩：对于需要压缩的文件，使用 parallel-uglify-plugin 等插件进行并行压缩。

12分析构建性能：使用 Webpack 的性能分析工具（如 webpack-bundle-analyzer）来识别构建中的瓶颈，并优化相应的配置和代码。

问git常用命令？

首先我会跟面试官说，我用sourcetree😀

唉罢了，不能太狂，还是说点常用命令表示尊重🙏

git init: 在当前目录初始化一个新的 Git 仓库。

git clone <repository>: 克隆（下载）远程仓库到本地。

git add <file>: 将文件添加到暂存区。

git commit -m "<message>": 提交暂存区中的文件，并添加提交信息。

git status: 查看工作树和暂存区的状态。

git log: 查看提交历史记录。

git diff <file>: 查看文件的修改内容。

git branch: 列出所有分支。

git checkout <branch>: 切换到指定的分支。

git merge <branch>: 合并指定分支到当前分支。

git pull: 拉取远程仓库的最新变更。

git push: 推送本地提交到远程仓库。

git remote add <name> <url>: 添加远程仓库的别名和 URL。

git remote -v: 查看远程仓库的别名和 URL。

git stash: 暂存当前的修改，以便切换到其它分支。

git reset HEAD <file>: 取消对文件的暂存操作。

git revert <commit>: 撤销指定的提交。

git rm <file>: 删除文件，并将删除操作添加到暂存区。

http？http和https区别？

HTTP（超文本传输协议）是一种常用的协议，适用于对安全性要求不高的场景，传输过程中是明文传输，对数据不进行加密处理；而 HTTPS 则提供了更加安全的通信方式，适用于需要保护用户数据隐私和防止篡改的应用场景。

http常见状态码？

200 OK：请求成功。服务器成功处理了请求，并返回相应的内容。

301 Moved Permanently：永久重定向。请求的资源已经被分配了新的 URL，以后应使用新的 URL。

302 Found：临时重定向。请求的资源暂时移动到了其他 URL，客户端应继续使用原始 URL。

400 Bad Request：无效请求。服务器无法理解或无法处理该请求。

401 Unauthorized：未授权。需要身份验证才能获得访问权限。

403 Forbidden：禁止访问。服务器拒绝访问所请求的资源。

404 Not Found：未找到。服务器无法找到请求的资源。

500 Internal Server Error：服务器内部错误。服务器在处理请求期间发生了意外情况。

502 Bad Gateway：错误的网关。作为代理或网关的服务器从上游服务器接收到无效响应。

503 Service Unavailable：服务不可用。服务器暂时无法处理请求（可能是由于过载或维护）。

get和post区别？

请求参数位置：GET 请求将参数附加在 URL 的查询字符串中（例如 example.com/path?param1=value1¶m2=value2），而 POST 请求将参数放在请求体中。

请求参数长度限制：GET 请求对参数长度有限制，不同浏览器和服务器可能有不同限制，通常在 2000-8000 字节之间。POST 请求没有这个限制。

安全性：GET 请求参数暴露在 URL 中，容易被窃取和篡改，因此不适合传输敏感信息。POST 请求将参数放在请求体中，相对安全一些。

缓存机制：GET 请求默认可以被缓存，可以通过设置响应头来控制缓存行为；POST 请求默认不会被缓存。

幂等性：GET 请求是幂等的，即多次重复请求得到的结果应该是相同的，不会对服务器产生副作用。POST 请求在多次重复请求时可能会对服务器产生副作用，如插入重复数据。

使用场景：GET 请求适用于获取资源、查询操作，对于无需修改服务器状态的操作；POST 请求适用于提交表单数据、新增资源、修改服务器状态等需要发送大量数据或进行写操作的场景。

总结起来，GET 请求适合获取数据，对服务器无副作用；POST 请求适合发送数据、进行修改操作。

地址栏输入url敲下回车后发生了什么？

1、URL 解析：浏览器解析输入的 URL，并分解为协议、域名、端口号和路径等组成部分。

2、DNS 解析：浏览器向本地 DNS 服务器发送域名查询请求，以获取对应的 IP 地址。如果本地 DNS 缓存中没有该域名的记录，则会进行迭代查询，直到找到对应的 IP 地址。

3、建立 TCP （传输控制协议）连接：浏览器使用 HTTP 或 HTTPS 协议，通过操作系统底层的网络 API（如 sockets）来建立与服务器的 TCP 连接。这个过程涉及三次握手，即客户端向服务器发送 SYN 包，服务器回复 SYN+ACK 包，最后客户端发送 ACK 包确认连接建立。

4、发送 HTTP 请求：建立好 TCP 连接后，浏览器向服务器发送 HTTP 请求。请求中包含请求方法（GET、POST 等）、路径、请求头（如 User-Agent、Cookie 等）和可选的请求体。

5、服务器处理请求：服务器接收到请求后，根据请求路径和其他信息，进行相应的处理。可以是返回静态文件、执行动态代码、查询数据库等操作。

6、服务器发送响应：服务器将处理结果打包成 HTTP 响应，包括响应状态码、响应头（如 Content-Type、Content-Length 等）和响应体（如 HTML 内容、JSON 数据等），通过建立的 TCP 连接发送给浏览器。

7、浏览器渲染页面：浏览器接收到响应后，根据响应中的内容类型进行相应处理。如果是 HTML 页面，浏览器会解析 HTML、CSS 和 JavaScript，并将其渲染显示在窗口中。

8、断开 TCP 连接：当服务器完成响应并关闭连接时，或者浏览器接收到指定的数据长度后，会断开与服务器的 TCP 连接。

这些步骤描述了从用户输入 URL 到浏览器显示网页的主要过程。在实际情况中，可能还有其他的网络优化技术和缓存机制来提高性能和减少延迟。

浏览器渲染机制？

解析HTML，构建DOM树；
解析CSS，构建CSSOM树；
把DOM和CSSOM组合成渲染树（render tree）；
布局和绘制渲染树。

npm install 后跟的参数--save、-g、--dev三者区别？

npm install是用于安装npm包的命令，而--save、-g和--dev是用于指定安装选项的参数。

--save选项会将包的名称和版本号添加到项目的package.json文件中的dependencies属性中，以便在以后重新安装时自动安装这些依赖项。

-g选项是全局安装选项，它将包安装到全局环境中，使其可以在任何项目中使用。这通常用于安装全局命令行工具。

--dev选项是开发依赖项选项，它将包添加到项目的package.json文件中的devDependencies属性中，以便在开发环境中使用，但不会在生产环境中使用。这通常用于安装开发工具、测试库和其他仅在开发过程中使用的依赖项。

因此，当你运行npm install --save时，它将安装并将包添加到项目的dependencies属性中。当你运行npm install -g时，它将全局安装包。当你运行npm install --dev时，它将安装并将包添加到项目的devDependencies属性中。