# fed-02-Engineering

**Repository Path**: F_tree/engineering

## Basic Information

- **Project Name**: fed-02-Engineering
- **Description**: 大前端作业：part2-前端工程化
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-27
- **Last Updated**: 2022-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端工程化

创建项目：创建项目结构（脚手架）、创建特定类型文件
   |
  编码 : 格式化代码（prettier、fecs、standardjs（vscode插件）、eslint）、校验代码风格（eslint）、编译/构建/打包（webpack）
   |
预览/测试： Web Server/ Mock 、 Live Reloading/ HMR 、Source Map
   |
  提交 ：Git Hooks 、 Lint-staged 、 持续集成
   |
  部署 ： CI /CD 、 自动发布

### 前端工程化
[工程化测试](2-1_note/2-1_工程化.md)

### 脚手架
[yeoman](2-1_note/2-1_脚手架.md)

### 自动化
- 
1. [gulp](2-1_note/2-1_自动化构建.md);
2. [gulp案例](2-1_note/2-1_gulp案例.md);
3. [gulpfile.js](2-1_note/2-1_gulp案例_gulpfile.js);
4. [封装自动化构建工具]();

### 模块化
- 两个标准
1. CommonJS 规范
2. ESModule 规范

- ESModule
3. ESModule描述
4. ES Module 存在问题

### 打包工具
1. 主流打包工具
    - webpack
    - gulp
    - rollup
    - grunt

2. webpack
    > 项目: Downloads/part2/2-2-test/03-webpack-start
3. webpack 工作原理
    > **过程**：**输入** 窗口命令 -- **找到对应配置** 配置文件【webpack.config.js】 —— **确定entry** 入口文件【main.js】 —— **解析依赖树** 【import/require】形成的依赖树 —— **递归依赖树**  —— **加载模块，递归处理文件**  通过加载器【各种loader】加载 —— 打包结果到 bundle.js -- **在output输出** dist目录形成打包文件
4. webpack 的 核心 loader 加载器
5. webpack 的 插件机制 plugin 【自动化】
6. webpack 的 增强开发体验 Source Map



## 自动化
1. [gulp](2-1/2-1_自动化构建.md);
2. [gulp案例](2-1/2-1_gulp案例.md);
3. [gulpfile.js](2-1/2-1_gulp案例_gulpfile.js);
4. [封装自动化构建工具]();