2021 最新 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/”);

// 将添加到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 实现多线程加速编译