# 工程化题目汇总
# 说下 webpack 的 loader 和 plugin 的区别，都使用过哪些 loader 和 plugin
公司：阿里、滴滴、挖财
分类：工程化
答案&解析
| 特性 | Loader | Plugin |
|---|---|---|
| 作用阶段 | 处理文件（模块）加载时的转换，类似“翻译器” | 扩展Webpack功能，影响整个构建生命周期 |
| 处理对象 | 针对单个文件资源，如 .js、.css、.vue 等 | 针对整个构建过程，能够监听生命周期钩子事件 |
| 功能示例 | 转换JS、编译Sass、转换TS、加载图片为base64等 | 打包优化、生成html、环境变量注入、代码压缩 |
| 配置位置 | module.rules 中配置 | plugins 数组中配置 |
# 说下 tree-shaking 的原理
公司：头条
分类：工程化
答案&解析
- Tree Shaking 依赖于 ES6 模块的 静态结构，因为 ES6 的 import 和 export 是静态声明，编译时能确定模块依赖关系和具体导入导出。
- 标记未被使用的导出代码。
- 结合压缩工具删除未用代码。
- 有效减少包体积，提高性能。