超级会员免费看
本文详细解答了webpack的常见面试问题，包括前端代码构建打包的原因、module、chunk、bundle的含义和区别、hash、chunkhash、contenthash的区别、webpack执行流程、基础配置项如entry、output、module、plugins、mode、devtool、devServer，以及Loader和Plugin的不同。还讨论了Scope Hoisting、webpack热更新原理、构建速度优化策略和性能压缩技巧。最后，探讨了webpack5的新特性，如持久化缓存、模块联邦等。
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：最终的输出
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
