webpack 常见面试题

Posted 2022-09-09 沿着路走到底

Q1:前端代码为何要进行构建和打包？

体积更小 (Tree-Shaking、压缩、合并)，加载更快

编译高级语言或语法（TS，ES6+，模块化，scss）

兼容性和错误检查（Polyfill、postcss、eslint）

统一、高效的开发环境

统一的构建流程和产出标准

集成公司构建规范（提测、上线等）

Q2:module、chunk、bundle 分别什么意思，有何区别？

module：各个源码文件，webpack中一切皆模块，只要是能引用的依赖，包括js、css、图片等都是模块。

chunk：多模块合并成的，如 entry、import()、splitChunk

chunk是指模块内代码被webpack处理后形成 webpack 输出文件内，eval所有执行的代码。当模块内代码有依赖文件时，就会生成二个chunk,形成chunks。

所以一个chunk对应一个模块，一个chunks对应一个或多个模块，一个bundle文件包含一个或多个chunk，也就是对应一个chunks。

bundle：最终的输出文件，一般是一个 chunk 对应 一个 bundle

Q3: hash、chunkhash、contenthash 的区别

hash：当代码发生改变时，hash就会改变。

contenthash：自身内容