React 面试题第三部分 webpack 面试真题

最新推荐文章于 2024-09-21 10:19:00 发布

m0_70009662

最新推荐文章于 2024-09-21 10:19:00 发布

阅读量36

点赞数

文章标签： react.js webpack 面试

本文链接：https://blog.csdn.net/m0_70009662/article/details/133465080

版权

1.前端为何要进行打包和构建？

体积更小，加载更快（tree-shaking，压缩合并）编译高级语言和语法（ts，es6，模块化）兼容性和错误提示（polyfill，postcss，eslint）

2.module chunk bundle 的区别

module: 只要是文件，都是一个module chunk：代码块，是webpack根据功能拆分出来的（chunk是无法在打包结果中看到的，打包结果中看到的是bundle），包含三种情况: 你的项目入口 (entry) 通过import ()动态引入的代码通过splitChunks拆分出来的代码

bundle:bundle是webpack打包之后的各个文件，一般就是和chunk是一对一的关系，bundle就是对chunk进行编译压缩打包等处理之后的产出。

3.loader 和 plugin 的区别

二者区别： loader即为文件加载器，操作的是文件，将文件A通过loader转换成文件B，是一个单纯的文件转化过程。 plugin即为插件，是一个扩展器，丰富webpack本身，增强功能，针对的是在loader结束之后，webpack打包的整个过程，他并不直接操作文件，而是基于事件机制工作，监听webpack打包过程中的某些节点，执行广泛的任务。

4.常见的loader 和 plugin 有哪些？

loader：

file-loader：把文件输出到一个文件夹中，在代码中通过相对URL引用输入的文件。
url-loader：和file类似，但能在文件很小的情况下以base64方式把文件内容注入到代码中。
image-loader：加载并压缩图片文件。
babel-loader：把ES6转换为ES5。
css-loader：加载CSS，支持模块化、压缩、文件导入等特性。
style-loader：把CSS代码注入到JavaScript中，通过DOM操作去加载CSS。
eslint-loader：通过ESlint检查JavaScript代码。
plugin:

define-plugin：定义环境变量。
commons-chunk-plugin：提取公共代码。
uglifyjs-webpack-plugin：缩小（压缩优化）js文件

5.Babel 和 webpack 的区别

babel和webpack做的事情有一部分重叠，例如都将js转化为ast并且做了一些transform，然后再输出各自的目标代码。但是两者的分工有所不同， babel主要做es语法的转换，确保最新的来的es特性能够以最快的速度deliver到开发者手中，但是不负责模块的组合。 webpack更多的是将输入的各个模块用自己内部的一套逻辑将代码“链接”起来，起胶水的作用，并且目标是输出可以直接在浏览器中执行的代码。