2024前端面试题-工程化篇

1.webpack（模块打包工具）五大核心

Entry入口，Output定义输出路径和命名规则，Loader模块转换器，Plugin扩展插件，Mode模式（Webpack使用相应模式的配置）

2.谈一谈你对Loader和Plugin的理解，使用过哪些？

loader：模块转换器，用于把模块原内容按照需求转换成新内容
通过使用不同的Loader，Webpack可以要把不同的文件都转成JS文件,比如CSS、ES6/7、JSX等

plugin：扩展插件
在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情
一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack打包的各个流程
IgnorePlugin
不打包匹配文件   
PrefetchPlugin
预加载的插件，提高性能

loader是用来对模块的源代码进行转换,而插件目的在于解决 loader 无法实现的其他事
因为plugin可以在任何阶段调用,能够跨Loader进一步加工Loader的输出
常用的：babel-loader（对js代码进行兼容性编译） file-loader（将webpack将所需的对象作为文件发送，并返回其公共URL.） url-loader less-loader, sass-loader

3.webpack热更新原理

Webpack的热更新，在不刷新页面的前提下，将新代码替换掉旧代码。

HRM的原理实际上是 webpack-dev-server（WDS）和浏览器之间维护了一个websocket服务。当本地资源发生变化后，webpack会先将打包生成新的模块代码放入内存中，然后WDS向浏览器推送更新，并附带上构建时的hash，让客户端和上一次资源进行对比.

4.什么是Code Splitting

Code Splitting代码分割，是一种优化技术。它允许将一个大的chunk拆分成多个小的chunk，从