关于Webpack的一些面试问题

Posted 2021-04-29 小小桦鱼

话不多说 Let's go！

1.webpack 有什么优势或缺点。

优势的话就是让以前很繁琐的事情变的简单了。把Htmk、js、png等等这些资源进行模块化然后打包，最后输出为一个文件。模块化的项目能做到开箱即用，不受其他影响。然后它的插件（Plugin）扩展功能强大，配置也比较灵活。社区也有庞大的活跃度，开发体验较好。但是也有不足的比如只能用于模块化的开发项目，以及更新的速度比较快学习成本加大。还有其他的比如 webpack是静态的编译，在需要打包的情景下会扫描所有可能的模块。它的插件、loader、工具彼此之间的一些bug和兼容问题是个头疼的问题。

简单的总结就是：

    优点：

                1.能够将你所需要的通过一些依赖打包成一个文件或者多个。

                2.插件、loader、其他工具比较丰富。

                3.社区的活跃度大。

    缺点：

                1.最大的问题配置太过于杂乱，各个插件、loader之间的配合与兼容是个问题，配置成本过大。

                 2.只能用于模块化的项目，没有多样化的一个拓展，以及在打包的时候去加载的依赖过于庞大，会在一定程度上造成项目冗余。

                3.更新的速度也很快对新人不太友好，以及之前的兼容不太好（一些命令）

其实我个人还有个 就是打包之后的文件在线上没法打断点。

2.webpack 、gulp有什么区别。

一个是偏向于模块化打包的工具而gulp是一个自动化的工具。gulp很灵活，不管你做什么功能都有一个统一的接口进行管理，去注册一个任务然后执行，偏向于流水线的任务化。webpack是将你前端进行模块化打包处理，实现了模块化的开发，通过各个依赖进行依赖关系进行分析然后按照指定的规则打包。

3.webpack的工作原理是什么？

第一步会初始化一系列的参数，去读取然后合并得出最终的执行参数。

第二步开始进行编译得到参数之后初始化编译（Complier）对象，紧接着加载所有插件的配置参数，然后执行run方法开始编译。

第三步 找到配置的入口entry的所有文件，进行加载。

第四步 从入口文件出发，开始调配loader开始对各个模块开始解析，再找出这些模块的依赖模块，递归进行这一流程，直到找所有的入口依赖。

第五步 完成loader的解析，然后得到每个模块的内容以及相互之间的依赖关系。

第六步 输出资源 得到入口和模块之间的依赖关系，然后开始进行打包组装每个模块的Chunk（代码块），处理完成之后代码块会转换成一个单独的文件，加入到输出的队列。

第七步 各项的内容都确定好之后，根据输出的配置确定输出文件路径文件名，然后在通过文件系统写入输出，最后生成一个文件。

4.webpack的loader 和 Plugin？

loader 是模块转换器，处理一些非js文件并且转换成webpack能够理解模块。 Plugin 是webpack的扩展插件，在构建的过程中你希望能够改变一些逻辑或者改变一些构建的结果（比如我希望文件能够压缩一下，以及多个文件进行压缩）

5.webpack中的loader 和 Plugin 用过那些？

file-loader 将文件发送到输出文件并返回路径

json-loader 加载json文件

babel-loader 转换es5

html-loader 将html以字符串的形式导出

style-loader 、less-loader、sass-loader

BabelMinifyWebpackPlugin 进行代码压缩的插件

HotModuleReplacementPlugin 启用模块热替换

mini-css-extract-plugin 打包成单独的css文件

optimize-css-assets-webpack-plugin 压缩css插件

uglifyjs-webpack-plugin 压缩js代码