Web前端最全【面试题】 webpack面试篇_webpack面试题，高级web前端开发面试解答问题

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

2、Loader和Plugin的区别？

Loader（加载器）：Webpack将一切文件视为模块，单Webpack的原生是只能解析js文件，如果想把其它文件打包的话，就会用到Loader，所以Loader的作用是让Webpack拥有了加载和解析非js文件的能力。

Plugin（插件）：Plugin可以扩展Webpack的功能，让Webpack具有更多的灵活性，在Webpack运行的生命周期中会广播出许多事件，Plugin可以监听这些事件，在何时的时机通过Webpack提供的API改变输出结果。

3、webpack的构建流程

• 初始化参数：从配置文件和shell语句中读取与合并参数，得出最终的参数。
• 开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置插件，执行对象的run方法开始执行编译。确定入口，根据配置文件中的entry找出所有的入口文件。
• 编译模块：从入口文件出发，调用所有配置的loader对模块进行编译，再找出该模块依赖的模块，再递归本步骤，直到所有入口依赖的文件都经过了本步骤的处理。
• 完成编译模块：在经过使用Loader翻译完所有的模块后，得到了每个模块被翻译后的最终内容以及他们之间的依赖关系。输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会。
• 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

在以上过程中，Webpack在会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用Webpack提供的API改变Webpack的运行结果。

4、Webpack有哪些常见的Loader和Plugin？他们是解决什么问题的？

Loader：

1. babel-loader：把ES6或者React转换成ES5
2. css-loader：加载CSS，支持模块化、压缩、文件导入等特性
3. eslint-loader：代码检查
4. file-loader：输出文件
5. url-loader：和fileload类似，但是小文件可以以base64的形式输出
6. sass-loader：把sass编译成CSS
7. postcss-loader：使用postcss来处理CSS
8. css-loader：主要来处理background还有@import这些语法，让webpack能够正确对其路径进行处理
9. style-loader：把CSS代码注入到JS中，通过DOM操作来加载CSS

Plugin：

1. DefinePlugin：创建一个编译时可配置的全局常量
2. HotMoDuleReplacementPlugin：启动模块热替换
3. html-webpack-plugin：自动生成带有入口文件引用的index.html
4. optimize-css-assets-webpack-plugin：用于优化或者压缩css资源
5. ModuleNotFoundPlugin：找不到模块的时候提供一下更详细的上下文信息
6. webpack-manifest-plugin：生产资产的显示清单文件
7. ModuleScopePlugin：引用了src目录外的文件报警插件

5、source map是什么？上下文环境怎么用？

• source map是为了解决开发代码与实际运行代码不一致是帮助我们debug到原始开发代码的技术
• webpack通过配置可以自动生成source map文件，map文件是一种对应编译文件和源文件的方法

source map的类型：

• source-map：原始代码，最好的source map有完整的结果，但是会很慢
• eval-source-map：原始代码，同样道理，但是最高的质量和最低的性能
• cheap-module-eval-source-map：原始代码（只有行内），但是最高的质量和最低的性能
• cheap-eval-source-map：转换代码（行内），每个模块被eval执行，并且sourcemap作为eval的一个dataurl
• eval：生成代码，每个模块都被eval执行，并且存在@sourceURL，带eval的构建模式能cache SourceMap
• cheap-source-map：转换代码（行内），生成sourcemap没有映射，从loaders生成sourcemap没有被使用
• cheap-module-source-map：原始代码（只有行内）与上面的一样除了每行特点的loader中进行映射

看似配置很多，其实只有五个关键自：eval、source-map、cheap、module和inline的任意组合

关键字及其含义：

• eval：使用eval包裹模块代码
• source-map：生成.map文件
• cheap：不包含列信息和loader的sourcemap
• module：包含loader的sourcemap（比如 jsx to js，babel的sourcemap），否则无法定义源文件
• inline：将.map作为DataURL嵌入，不单独生成.map文件

如何选择source map的类型

首先在源代码的列信息是没有意义的，只要有行信息就能完整的建立打包前后代码之间的依赖关系，因此，不管是开发还是生产环境都可以选择不包含列信息。

开发环境建议使用：cheap-module-eval-source-map

生成环境使用：cheap-module-source-map

6、如何利用webpack来优化前端性能？

1. 压缩js  TerserPlugin({})
2. 压缩css OptimizeCSSAssetsPlugin({})
3. 压缩图片 image-webpack-loader
4. 清除无用的css（定义并未使用）：PurgecssPlugin
5. Tree Shaking:

• 一个模块有多个方法，只要其中某个方法用到了，则整个文件都会打到bundle里面去，tree shaking就是只把用到的方法打包，没用到的方法会在ugligy阶段去掉。
• 原理是利用ES6模块的特点，只能作为模块顶层语句出现，import的模块名只能是字符串常量。
• webpack默认支持，在.babelrc里设置module:false即可在production mode下默认开启

1. Scope Hoisting：

• 可以让webpack打包出来的文件体积更小，运行的更快，它又译为作用域提升，是在webpack3中推出的功能。
• 原理是将所有的模块按照引用顺序放在一个函数作用域里，然后适当地重命名一些变量防止命名冲突，
• 这个功能在node为production下默认开启，开发环境要用webpack.optimize.ModuleConcatenationPlugin

1. 代码分割：

• 对于大的web应用来讲，将所有的代码都放在一个文件中显然是不够有效的，特别是当你的某些代码块是在某些特殊的时候才会被用到。
• webpack有一个功能就是将你的代码库分割成chunks语块，当代码运行到需要他们的时候再进行加载

1. 入口点分割：
2. Entry Poins：入口文件设置的时候可以配置
3. 问题：

• 如果入口chunks之间包含重复的模块（lodash），那些重复的模块都会被引入各自的bundle中。
• 不够灵活，并且不能将核心应用程序逻辑进行动态拆分代码

1. 动态倒入和懒加载
2. 用户当前需要什么功能就只加载这个功能对应的代码，也就是所谓的按需加载
3. 在给单页应用做按需加载优化时，一般采用以下原则

• 对网站功能进行划分，每一个类一个chunk
• 对于首次打开页面需要的功能直接加载，尽快展示给用户，某些依赖大量代码的功能点可以按需加载
• 被分割出去的代码需要一个按需加载的时机

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-RUktG1mT-1715878215625)]