2021 最新 webpack 面试题

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的构建速度

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

关于webpack的面试题总结 - 知乎 (zhihu.com)

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

(2条消息) webpack的面试题总结_AC总有一天的博客-CSDN博客_webpack面试

关于 webpack 的面试题有哪些？

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-2_allfirst_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