【前端面试题】08—31道有关前端工程化的面试题(附答案)

{"name"："Project"， "version"：" 0.0.1"}

13、WebPack和 gulp/grunt相比有什么特性？

gulp/ grunt是一种能够优化前端的流程开发工具，而 Web Pack是一种模块化的解决方案，由于 WebPack提供的功能越来越丰富，使得 WebPack可以代替 gulp/grunt类的工具。

14、grunt和gulp的工作方式是什么？

在一个配置文件中，指明对某些文件进行何种编译、组合、压缩等任务的具体步骤，当运行这些工具的指令的时候，就可以自动完成这些任务。

15、WebPack的工作方式是什么？

把项目当作一个整体，通过一个给定的主文件（如 index. js）， WebPack将从这个文件开始找到你项目的所有依赖，并使用 loader（加载器）来处理它们，最后打包为个浏览器可识别的 JavaScript文件。

16、Babe通过编译能达到什么目的？

能达到以下目的。

（1）使用下一代的 JavaScript标准（ EMAScript 6、 EMAScript 7）语法，当前的浏览器尚不完全支持这些标准。

（2）使用基于 JavaScript进行拓展的语言，比如 React的jsx语法。

17、EventSource和 websocket的区别是什么？

区别如下。

EventSource本质仍然是HTTP，仅提供服务器端到浏览器端的单向文本传输，不需要心跳链接，链接断开会持续重发链接。

注意：心跳链接是用来检测一个系统是否存活或者网络链路是否通畅的一种方式。

（2） websocket是基于TCP的协议，提供双向数据传输，支持二进制，需要心跳链接，断开链接时不会重链。

（3） EventSource更简洁轻量， websocket支持性更妤，后者功能更强大一点。

18、在工作中， WebPack工具中常用到的插件有哪些？

常用到的插件如下

（1） HtmlWebpackPlugin：依据一个HTML模板，生成HTML文件，并将打包后的资源文件自动引入。

（2） commonsChunkPlugin：抽取公共模块，减小包占用的内存空间，例如vue的源码、 jQuery的源码等。

（3） css-loader：解析CSS文件依赖，在 JavaScript中通过 require方式引入CSS文件。

（4） style- loader.：通过 style标签引入CSS。

（5） extract-text-webpack- plugin：将样式抽取成单独的文件。

（6）url- loader：实现图片文字等资源的打包，limit选项定义大小限制，如果小于该限制，则打包成base64编码格式；如果大于该限制，就使用file- loader去打包成图片。

（7） hostess：实现浏览器兼容。

（8） babel：将 JavaScript未来版本（ EMAScript6、 EMAScript2016等）转换成当前浏览器支持的版本。

（9） hot module replacement：修改代码后，自动刷新、实时预览修改后的效果

（10） ugliifyJsPlugin：压缩 JavaScript代码。

19、WebPack与gulp的区别是什么？

区别如下。

（1）用途不同。gulp是工具链，可以配合各种插件使用，例如对 JavaScript、CSS文件进行压缩，对less进行编译等；而 WebPack能把项目中的各种 JavaScript、CSS文件等打包合并成一个或者多个文件，主要用于模块化开发。

（2）侧重点不同。gulp侧重于整个过程的控制管理（像是流水线），通过配置不同的任务，构建整个前端开发流程，并且gulp的打包功能是通过安装gulp-webpack来实现的；WebPack则侧重于模块打包。

（3） WebPack能够按照模块的依赖关系构建文件组织结构。

20、window对象中，模块间的依赖关系完全由文件的加载顺序决定，这样的模块组织方式出现的弊端是什么？

弊端如下。

（1）全局作用域下容易造成变量冲突。

（2）文件只能按照< script>的书写顺序进行加载

（3）开发人员需要自己解决模块代码库的依赖关系。

（4）在大型项目中这样的加载方式会导致文件冗长而难以管理。

21、如何用 webpack-dev- server监控文件编译？

打开多个控制台，用 webpack--watch实时监控文件变动，并随时编译。

22、如何修改 webpack-dev- server的端口？

用--port修改端口号，如 webpack-dev-server--port888。

23、publicPath是什么？

在 WebPack自动生成资源路径时，比如由于 WebPack异步加载分包而需要独立出来的块，或者打包CSS时， WebPack自动替换掉的图片、字体文件，又或者使用html-webpack-plugin后 WebPack自动加载的入口文件等，这些 WebPack生成的路径都会参考 publicPath参数。不需要关注CDN，需要关注的是，文件发布出来后，应该部署到哪里。如果文件是与页面放到一起的，那么可以按相对路径来设置，比如'./'之类的；而如果 JavaScript、CSS文件用于存放CDN，当然就要填写CDN的域名和路径。

24、export、 export default和 module.export的区别是什么？

 export、 export default都属于 EMAScript 6 模块化开发规范。

export和 export default的区别如下。

在同一个文件里面可以有多个 export，一个文件里面只能有1个 export default。

使用 import引入的方式也有点区别。

在使用 export时，用 import引入的相应模块名字一定要和定义的名字一样；而在使用 export default时，用 import引入的模块名字可以不一样。

module. export属于 CommonJS语法规范。

25、当使用Babel直接打包的 JavaScript文件中含有jsx语法的时候会报错，如何解决这个问题？

修改 package. json并添加 react，如以下代码所示。

"babel"：{    "presets"：[          "es2015",             "react",           "stage-o"], "plugins" ：["add-module-exports"]}

26、当使用html- webpack- plugin时找不到指定的 template文件怎么办？

通过以下代码进行解决。

{test:/ \.html ？$/,loader : 'html-loader '}

也就是将以前的file-loader修改为html- loader就可以了。

27、WebPack如何切换开发环境和生产环境？

生产环境与开发环境的区别无非就是调用的接口地址、资源存放路径、线上的资源是否需要压缩等方面。目前的做法是通过在 package. json中设置node的一个全局变量，然后在 webpack. config. js文件里面进行生产环境与开发环境的配置切换。

28、WebPack的特点是什么？

特点如下：

（1）具有丰富的插件，方便程序员进行开发。

（2）具有大量的加载器，包括加载各种静态资源。

（3）支持代码分割，提供按需加载的能力。

（4）它是一个理想的发布工具。

29、WebPack的优势是什么？

优势如下：

（1） WebPack以 CommonJS的形式书写脚本，对 AMD/CMD的支持也很全面，方便对旧项目进行代码迁移

（2）绝大部分前端资源都可以模块化。

（3）开发便捷，能替代 grunt/gulp的部分工作，如程序打包、压缩混淆、图片转base64编码等。

（4）扩展性强，插件机制完善，特别是支持 React热插拔功能。

30、图片处理常见的加载器有几种？

有以下几种。

（1）file- loader，默认情况下会根据图片生成对应的MD5散列的文件格式。

（2）url- loader，它类似于file- loader，但是url- loader可以根据自身文件的大小，来决定是否把转化为base64格式的 DataUrl单独作为文件，也可以自定义对应的散列文件名。

（3） image- webpack- loader，提供压缩图片的功能。

31、WebPack命令的-- config选项有什么作用？

-- config用来指定一个配置文件，代替命令行中的选项，从而简化命令。如果直接执行 WebPack, WebPack会在当前目录下查找名为 webpack. config. js的文件。