1. Webpack：资源打包优化工具
案例1：多入口文件打包 假设项目有多个页面（如首页index.js和登录页login.js），需要分别打包：
● 配置webpack.config.js：
module.exports = {
entry: {
index: './src/index.js',
login: './src/login.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js' // 生成 index.bundle.js 和 login.bundle.js
}
};● 效果：生成独立文件，避免单文件过大，按需加载。
案例2：使用CSS模块化处理
● 安装css-loader和style-loader：
● 在配置中添加加载器规则：
module: {
rules: [
{
test: /\.css$/,
use: [ // 启用CSS模块化（自动添加局部类名）
'style-loader',
{
loader: 'css-loader',
options: {
modules: true // 明确启用CSS模块化
}
}
]
}
]
}● 代码示例：
2. Babel：JavaScript语法翻译器
案例1：React语法转换
● 项目使用React JSX语法（如<div>Hello</div>），需转换为浏览器可识别的代码：
● 安装Babel核心和React预设：
● 配置babel.config.json：
{
"presets": ["@babel/preset-react"]
}● 转换效果：Babel 将 JSX 语法转换为浏览器可直接运行的 React.createElement 形式，确保兼容性。
案例2：使用Polyfill支持老浏览器
● 项目中使用Promise，但需要兼容IE11：
● 安装@babel/polyfill（或使用core-js和@babel/runtime）：
● 在入口文件顶部引入：
● 效果：IE11可正常运行Promise代码。
3. Git：代码版本管理工具
案例1：分支开发与合并
● 团队开发新功能“用户中心”：
a. 创建分支：git checkout -b feature/user-center
a. 开发并提交代码：git add. && git commit -m "完成用户中心页面"
a. 合并到主分支：切换到main分支，执行git merge feature/user-center
a. 解决冲突（如文件同时被修改）：手动编辑冲突文件，然后git add. && git commit完成合并。
案例2：回退到历史版本
● 发现某次提交导致bug，需回退：
a. 查看提交记录：git log
b. 找到bug前的提交ID（如abc123）
a. 回退：git reset --hard abc123（慎用！会丢失后续提交）
a. 强制推送（如团队协作时）：git push -f origin main（需权限，谨慎操作）
4. 前端工程化流程（简化+案例,注意其他依赖）
案例：从开发到部署的全流程
1. 初始化项目：
例如使用 Vue 的官方脚手架 Vue CLI:命令行执行：vue create my-project
2. 开发与测试：
○ 使用ESLint检查代码规范：yarn eslint src
○ 单元测试：yarn test（如使用Jest）
3. 打包优化：
○ 生产模式打包（自动压缩、优化）：yarn build
○ 生成分析报告：yarn build --analyze（查看打包体积）
4. 部署：
○ 将dist目录推送到服务器或CDN
○ 使用Git标签记录版本：git tag v1.0.0 && git push --tags
总结：
● Webpack：通过配置灵活处理资源打包、模块化加载，优化性能。
● Babel：让新语法和库跨浏览器兼容，配合Polyfill填补环境差异。
● Git：保障团队协作、版本回退和代码安全。
● 工程化：结合工具链实现高效开发、测试、打包与部署。
特点说明：
1. 案例具体：每个工具搭配实操场景（多入口、CSS模块、React转换、分支合并等），贴近真实开发。
2. 步骤清晰：包含命令、配置代码和效果说明，可复制性高。
3. 覆盖广度：覆盖工具的核心功能（打包、语法转换、版本管理）和工程化全流程。
4. 提示风险：对危险操作（如git push -f）标注注意事项，避免误用。
