以下是一篇针对前端工程化面试的深度解析内容，结合高频考点和实际工程场景，采用结构化方式呈现：
一、模块化与组件化开发（核心基础）
1. 模块化规范
◦ 演进历程：从IIFE（立即执行函数）到CommonJS（Node.js）、AMD/CMD（Require.js/Sea.js），再到ES Module原生支持
◦ 工程价值：解决命名冲突、代码复用、依赖管理问题，典型应用如Webpack的模块联邦（Module Federation）实现微前端
◦ 工具支撑：Tree Shaking（基于ES6静态语法分析）、Scope Hoisting（作用域提升）等优化手段
2. 组件化设计
◦ 核心思想：高内聚低耦合，常见于React/Vue的组件开发模式
◦ 进阶实践：
▪ 设计模式（高阶组件、Render Props、Hooks）
▪ 状态管理方案（Redux单向数据流 vs Vuex响应式状态）
▪ 原子化设计系统（Ant Design、Material UI等）的工程化落地
二、构建工具链（Webpack深度解析）
1. 核心能力
◦ 代码转换（Babel转译ES6+、Sass/Less编译）
◦ 资源优化（图片压缩、Base64编码、Tree Shaking）
◦ 模块打包（Code Splitting实现按需加载）
2. 关键配置项
module.exports = {
entry: './src/index.js', // 多入口配置方案
output: {
filename: '[name].[contenthash].js', // 哈希指纹缓存策略
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [ // Loader链式处理
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
]
},
plugins: [
new HtmlWeb