webpack 的常见面试题

末蓝、 2023-02-11 15:29 5阅读 0赞

#### 一、什么是webpack，和 grunt 和 gulp 有什么不同 ####

答案： `webpack` 是一个模块打包器，它可以递归的打包项目中的所有模块，最终生成几个打包后的文件。它和其它的工具最大的不同在于它支持 `code-splitting`、模块化(`AMD, ESM, CommonJS`)、全局分析等。

#### 二、什么是 bundle，什么是 chunk，什么是 module ####

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

#### 三、什么是 Loader，什么是 Plugin ####

答案：`Loaders` 是用来告诉 `webpack` 如何处理某一类型的文件，并且引入到打包出来的文件中。  
`Plugin` 是用来自定义 `webpack` 打包过程的方式，一个插件是含有 `apply` 方法的一个对象，通过这个方法可参与到整个 `webpack` 打包的各个流程，生命周期。

#### 四、如何可以自动生成 webpack 配置 ####

答案：`webpack-cli` / `vue-cli` / `etc...` 等脚手架工具。

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

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

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

答案： 模块热更新是 `webpack` 的一个功能，它可以使得代码修改过后不刷新浏览器就可以更新，是高级版的自动刷新浏览器。

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

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

#### 八、什么是 Tree-shaking，CSS 可以 Tree-shaking吗 ####

答案：`Tree-shaking` 是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。在 `webpack` 中 `Tree-shaking` 是通过 `uglifyJSPlugin` 来 `Tree-shaking JS`，`CSS` 需要使用 `Purify-CSS`。