2021 最新 webpack 面试题

男娘i 2022-10-12 05:28 255阅读 0赞

### webpack打包原理 ###

*  将所有依赖打包成一个bundle.js，通过代码分割成单元片段按需加载

### 什么是webpack，与gulp,grunt有什么区别 ###

*  webpack是一个模块打包工具，可以递归地打包项目中的所有模块，最终生成几个打包后的文件。
 *  区别：webpack支持代码分割，模块化（AMD,CommonJ,ES2015），全局分析

### webpack 和 gulp 的区别？ ###

*  webpack是一个模块打包器，强调的是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源都看成是模块，通过loader和plugin对资源进行处理。
 *  gulp是一个前端自动化构建工具，强调的是前端开发的工作流程，可以通过配置一系列的task，第一task处理的事情（如代码压缩，合并，编译以及浏览器实时更新等）。然后定义这些执行顺序，来让glup执行这些task，从而构建项目的整个开发流程。自动化构建工具并不能把所有的模块打包到一起，也不能构建不同模块之间的依赖关系。

### 什么是entry,output ###

*  entry 入口，告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.js
 *  output 出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist

### 什么是loader，plugins ###

*  loader是用来告诉webpack如何转换某一类型的文件，并且引入到打包出的文件中。
 *  plugins(插件)作用更大，可以打包优化，资源管理和注入环境变量
 *  loader: loader是文件加载器，能够加载资源文件，直接对文件进行操作，最后进行打包， 处理一个文件可以使用多个loader，loader的执行顺序是和本身的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行。 第一个执行的loader接收源文件内容作为参数，其他loader接收前一个执行的loader的返回值作为参数。最后执行的loader会返回此模块的JavaScript源码
 *  plugin: webpack启动后，在读取配置的过程中会执行new MyPlugin(options)初始化一个MyPlugin获取其实例 · 在初始化compiler对象后，就会通过compiler.plugin(事件名称，回调函数)监听到webpack广播出来的事件 · 并且可以通过compiler对象去操作webpack 虽然俩者都可以对webpack进行一定的拓展，但是loader更像是一个转换器，直接操作文件进行转换 。plugin是一个扩展器，它丰富了wepack本身，针对于loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，

### 什么是bundle,chunk,module ###

bundle是webpack打包出来的文件，chunk是webpack在进行模块的依赖分析的时候，代码分割出来的代码块。module是开发中的单个模块

### webpack-dev-server和http服务器如nginx有什么区别 ###

webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，相比传统http服务器开发更加简单高效

### 什么是模块热更新 ###

webpack的一个功能，可以使代码修改后不用刷新浏览器就自动更新，高级版的自动刷新浏览器，devServer中通过hot属性可以控制模块的热替换

### webpack的环境拆分 ###

环境拆分：主要有两种方式

*  第一种方式是将开发环境配置和生成环境配置分离，并配置一个公共配置，在对应的环境下调用 merge方法将公共配置的内容merge到当前环境的配置中，实现环境分离；
 *  第二种方式是开发环境和生成环境配置写在同一个文件中，通过在script脚本中设置NODE\_ENV区分当前环境，在配置文件中通过 process.env.NODE\_ENV 获取当前环境，调用对应的配置。需要注意window在使用NODE\_ENV时可能会出现问题，可以安装cross-env 并配置在script脚本中解决该问题。

### webpack-dev-server的作用 ###

webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。

webpack-dev-server 主要提供两个功能：

1.为静态文件提供web服务

2.自动刷新和热替换(HMR)

自动刷新指当修改代码时webpack会进行自动编译，更新网页内容

热替换指运行时更新各种模块，即局部刷新

## dev-server是怎么跑起来的 ##

webpack-dev-server支持两种模式来自动刷新页面

*  iframe模式（页面放在iframe中，当发送改变时重载） 无需额外配置，只要以这种格式url访问即可。`http://localhost:8080/webpack-dev-server/index.html`
 *  inline模式（将webpack-dev-server的客户端入口添加到bundle中） inline模式下url不用发生变化，但启动inline模式分两种情况

// 以命令行启动webpack-dev-server有两种方式
    // 方式1 在命令行中添加--inline命令
    // 方式2 在webpack-config.js添加devServer:{inline: true}
    // 以node.js API启动有两种方式
    // 方式1 添加webpack-dev-server/client?http://localhost:8080/到webpack配置的entry入口点
    config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
    // 将<script src="http://localhost:8080/webpack-dev-server.js"></script>添加到html文件中

### 使用过webpack里面哪些plugin和loader ###

**loader**

*  babel-loader: 将ES6+转移成ES5-
 *  css-loader,style-loader：解析css文件，能够解释@import url()等
 *  file-loader：直接输出文件，把构建后的文件路径返回，可以处理很多类型的文件
 *  url-loader：打包图片

### 什么是长缓存？在webpack中如何做到长缓存优化 ###

*  浏览器在用户访问页面的时候，为了加快加载速度会对用户访问的静态资源进行存储，但是每一次代码升级或更新都需要浏览器下载新的代码，最简单方便的方式就是引入新的文件名称。
 *  webpack中可以在output中指定chunkhash，并且分离经常更新的代码和框架代码。通过NameModulesPlugin或HashedModuleIdsPlugin使再次打包文件名不变

### 什么是Tree-shaking？CSS可以Tree-shaking ###

Tree-shaking是指在打包中取出那些引入了但在代码中没有被用到的死代码。

webpack中通过uglifysPlugin来Tree-shaking JS。CSS需要使用purify-CSS

### 如何提高webpack的构建速度 ###

1.  通过externals配置来提取常用库
2.  利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。
3.  使用Happypack 实现多线程加速编译
4.  babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译效率，可以加上cacheDirectory参数或使用 transform-runtime 插件试试
5.  不需要打包编译的插件库换成全局"script"标签引入的方式，比如jQuery插件，react, react-dom等，代码量是很多的，打包起来可能会很耗时，可以直接用标签引入，然后在webpack配置里使用 expose-loader 或 externals 或 ProvidePlugin 提供给模块内部使用相应的变量
6.  优化构建时的搜索路径 在webpack打包时，会有各种各样的路径要去查询搜索，我们可以加上一些配置，让它搜索地更快，比如说，方便改成绝对路径的模块路径就改一下，以纯模块名来引入的可以加上一些目录路径  
    还可以善于用下resolve alias别名 这个字段来配置，还有exclude等的配置，避免多余查找的文件，比如使用babel别忘了剔除不需要遍历的

[关于webpack的面试题总结 - 知乎 (zhihu.com)][webpack_ - _ _zhihu.com]

[关于 webpack 的面试题有哪些？ - 知乎 (zhihu.com)][webpack _ - _ _zhihu.com]

[(2条消息) webpack的面试题总结\_AC总有一天的博客-CSDN博客\_webpack面试][2_ webpack_AC_-CSDN_webpack]

[关于 webpack 的面试题有哪些？][webpack _ - _ _zhihu.com]

https://blog.csdn.net/weixin\_52139094/article/details/117821871?ops\_request\_misc=%257B%2522request%255Fid%2522%253A%2522162532582416780274126313%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request\_id=162532582416780274126313&biz\_id=0&utm\_medium=distribute.pc\_search\_result.none-task-blog-2allfirst\_rank\_v2~rank\_v29-7-117821871.pc\_search\_result\_cache&utm\_term=webpack+%E9%9D%A2%E8%AF%95%E9%A2%98&spm=1018.2226.3001.4187

[webpack_ - _ _zhihu.com]: https://zhuanlan.zhihu.com/p/44438844
[webpack _ - _ _zhihu.com]: https://www.zhihu.com/question/266788138/answer/314450633
[2_ webpack_AC_-CSDN_webpack]: https://blog.csdn.net/duyujian706709149/article/details/97299339?ops_request_misc=%7B%22request%5Fid%22%3A%22162532582416780274126313%22%2C%22scm%22%3A%2220140713.130102334.pc%5Fall.%22%7D&request_id=162532582416780274126313&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v29-2-97299339.pc_search_result_cache&utm_term=webpack+%E9%9D%A2%E8%AF%95%E9%A2%98&spm=1018.2226.3001.4187