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

随着前端技术的发展，前端工程化变得越来越重要。前端工程化部分的面试题主要考察应试者对工程化的理解与运用，如何通过工程化来提高代码质量、编译代码、优化代码；如何提高网站性能，保障网站安全，提升用户体验；如何将开发的代码按照理想的方式发布和上线等。

当然，一些新技术的实现（诸如 EMAScript 6、 typescript、jsx、 Less、Sass、 Stylus等）都离不开前端工程化。

1、谈谈你对 WebPack的认识。

WebPack是一个模块打包工具，可以使用 WebPack管理模块依赖，并编译输岀模块所需的静态文件。它能够很好地管理与打包Web开发中所用到的HTML、 JavaScript 、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源， WebPack有对应的模块加载器。Web Pack模块打包器会分析模块间的依赖关系，最后生成优化且合并后的静态资源。

WebPack的两大特色如下。

（1）代码切割（ code splitting）

（2） loader可以处理各种类型的静态文件，并且支持串行操作WebPack以 CommonJS规范来书写代码，但对 AMD/CMD的支持也很全面，方便对项目进行代码迁移。

WebPack具有 require.js和 browserify的功能，但也有很多自己的新特性，

（1）对 CommonJS、AMD、ES6的语法实现了兼容。

（2）对 JavaScript、CSS、图片等资源文件都支持打包

（3）串联式模块加载器和插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、 EMAScript 6的支持

（4）有独立的配置文件 webpack.config. js。

（5）可以将代码切割成不同的块，实现按需加载，缩短了初始化时间。

（6）支持 SourceUrls和 SourceMaps，易于调试。

（7）具有强大的 Plugin接口，大多是内部插件，使用起来比较灵活

（8）使用异步I/O，并具有多级缓存，这使得 WebPack速度很快且在增量编译上更加快。

2、在使用 WebPack时，你都做些什么？

用来压缩合并CSS和 JavaScript代码，压缩图片，对小图生成base64编码，对大图进行压缩，使用 Babel把 EMAScript 6编译成 EMAScript 5，热重载，局部刷新等。在 output中配置出口文件，在 entry中配置入口文件。

使用各种 loader对各种资源做处理，并解析成浏览器可运行的代码。

3、你用Gulp都实现了哪些功能？

我之前写的一个 Angular项目就是使用Gulp构建的。使用task制定各种任务，将通过 bower安装的第三方插件复制到开发和生产目录中。复制Less并将它编译成CSS然后合并到一个文件中并压缩。

将JS目录下所有的 JavaScript文件合并并压缩成一个JavaScript文件。使用 imagemin压缩图片，使图片变小。

使用open让项目在自动运行时自动打开浏览器。使用 watch监听src目录中代码的变化，并进行实时编译。使用 connect创建一个项目服务器，用来做开发调试。

4、说说 WabPack打包的流程。

具体流程如下。

（1）通过 entry配置入口文件。

（2）通过 output指定输出的文件。

（3）使用各种 loader处理CSS、 JavaScript、 image等资源，并将它们编译与打包成浏览器可以解析的内容等。

5、什么是 WebPack？

Web Pack是一个打包工具， WebPack可以将项目中使用的脚本开发语言CoffeeScript Type Script、样式开发语言Less或者Sass“编译”成浏览器能识别的 JavaScript和CSS文件。

6、WebPack的核心原理是什么？

核心原理如下。

（1）一切皆模块。

正如 JavaScript文件可以是一个“模块”（ module）一样，其他的（如CSS、 image或 HTML）文件也可视作模块。因此，可以执行 require（'myJSfile js'），亦可以执行require（ 'myCSSfile.css'）。这意味着我们可以将事务（业务）分割成更小的、易于管理的片段，从而达到重复利用的目的。

（2）按需加载。

传统的模块打包工具（ module bundler）最终将所有的模块编译并生成一个庞大的bundle. js文件。但是，在真实的App里， bundle. js文件的大小在10MB到15MB之间，这可能会导致应用一直处于加载状态。因此， WebPack使用许多特性来分割代码，然后生成多个 bundle js文件，而且异步加载部分代码用于实现按需加载。

7、WebPack中 loader的作用是什么？

具体作用如下。

（1）实现对不同格式文件的处理，比如将Scss转换为CSS，或将 TypeScript转化为Javascript。

（2）可以编译文件，从而使其能够添加到依赖关系中。loader是 WebPack最重要的部分之一。通过使用不同的 loader，我们能够调用外部的脚本或者工具，实现对不同格式文件的处理。loader需要在 webpack.config.js里单独用 module进行配置。

8、说说你工作中几个常用的 loader。

常用的 loader如下：

babel- loader：将下一代的 JavaScript语法规范转换成现代浏览器能够攴持的语法规范。因为 babel有些复杂，所以大多数开发者都会新建一个. babelrc进行配置。

css-loader、 style- loader：这两个建议配合使用，用来解析CSS文件依赖。

less- loader：解析less文件。

file- loader：生成的文件名就是文件内容的MD5散列值，并会保留所引用资源的原始扩展名。

url- loader：功能类似于file-loader，但是当文件大小低于指定的限制时，可以返回一个 DataURL。

9、plugins和 loader有什么区别？

它们是两个完全不同的东西。loader负责处理源文件，如CSS、jsx文件，一次处理一个文件。而 plugins并不直接操作单个文件，它直接对整个构建过程起作用。

10、说说 HtmlWebpackPlugin插件的作用。

依据一个简单的 index .html模板，生成一个自动引用你打包后的 JavaScript文件的、新的 index.html文件。

11、说说 WebPack支持的脚本模块规范。

不同项目在定义脚本模块时使用的规范不同。有的项目会使用 Commonjs规范（参考 Node. js）；有的项目会使用 EMAScript 6模块规范；有的还会使用AMD规范（参考 Require. js）。WebPack支持这3种规范，还支持混合使用。

12、如何为项目创建 package. json文件？

将命令行切换至根目录下，运行 npm init，命令行就会一步一步引导你建立package. json文件。手动在根目录下创建一个空文件，并命名为 package. json，在文件中填充JSON格式的常规内容。例如初期只需要name和 version字段。

{
"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的文件。

本文完〜