面试官常问 webpack 面试题

目录

第一题：谈谈你对webpack的理解？

第二题：说说webpack与grunt、gulp的不同？

第三题：什么是bundle,什么是chunk，什么是module?bundle：

第四题：什么是Loader?什么是Plugin?

第五题：有哪些常见的Loader？他们是解决什么问题的？

---

第一题：谈谈你对webpack的理解？

webpack是一个打包模块化js的工具，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目。WebPack可以看做是模块的打包机器：它做的事情是，分析你的项目结构，找到js模块以及其它的一些浏览器不能直接运行的拓展语言，例如：Scss，TS等，并将其打包为合适的格式以供浏览器使用。

第二题：说说webpack与grunt、gulp的不同？

三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。grunt和gulp是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。所以，从构建思路来说，gulp和grunt需要开发者将整个前端构建过程拆分成多个`Task`，并合理控制所有`Task`的调用关系；webpack需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader做何种解析和加工对于知识背景来说，gulp更像后端开发者的思路，需要对于整个流程了如指掌webpack更倾向于前端开发者的思路

第三题：什么是bundle,什么是chunk，什么是module?bundle：

是由webpack打包出来的文件chunk：代码块，一个chunk由多个模块组合而成，用于代码的合并和分割module：是开发中的单个模块，在webpack的世界，一切皆模块，一个模块对应一个文件，webpack会从配置的entry中递归开始找出所有依赖的模块

第四题：什么是Loader?什么是Plugin?

1）Loaders是用来告诉webpack如何转化处理某一类型的文件，并且引入到打包出的文件中

2）Plugin是用来自定义webpack打包过程的方式，一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack打包的各个流程(生命周期)。

第五题：有哪些常见的Loader？他们是解决什么问题的？

file-loader：把文件输出到一个文件夹中，在代码中通过相对URL去引用输出的文件url-loader：和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去source-map-loader：加载额外的Source Map文件，以方便断点调试image-loader：加载并且压缩图片文件babel-loader：把ES6转换成ES5css-loader：加载CSS，支持模块化、压缩、文件导入等特性style-loader：把CSS代码注入到JavaScript中，通过DOM操作去加载CSS。eslint-loader：通过ESLint检查JavaScript代码