vlambda博客
学习文章列表

关于Webpack的一些面试问题(1)

话不多说 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代码