# webpack

**Repository Path**: training-demo/webpack

## Basic Information

- **Project Name**: webpack
- **Description**: 掌握 Webpack 的核心概念和完整使用流程。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-11
- **Last Updated**: 2026-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Webpack Study

一个基于 Webpack 5 的前端工程化学习项目，包含 TypeScript、Less、ESLint、Prettier 等完整工具链配置。

## 技术栈

| 类别 | 技术 |
| --- | --- |
| 构建工具 | Webpack 5 |
| 语言 | TypeScript（Babel 编译） |
| 样式 | Less + CSS |
| 代码规范 | ESLint 9 (flat config) |
| 代码格式化 | Prettier |
| HTTP 请求 | Axios |

## 项目结构

```
webpack-study/
├── public/
│   └── index.html              # HTML 模板
├── src/
│   ├── assets/                  # 静态资源（图片等）
│   ├── css/                     # CSS 样式
│   ├── less/                    # Less 样式（主样式文件）
│   ├── types/                   # TypeScript 类型声明
│   ├── utils/                   # 工具函数
│   └── main.ts                  # 入口文件
├── eslint.config.mjs            # ESLint flat config 配置
├── .prettierrc.json             # Prettier 配置
├── tsconfig.json                # TypeScript 配置
├── webpack.config.js            # Webpack 配置
└── package.json
```

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

启动后自动打开浏览器访问 `http://localhost:3000`，支持热更新（HMR）。

### 生产构建

```bash
npm run build
```

构建产物输出到 `dist/` 目录，生产环境下 CSS 会被 `MiniCssExtractPlugin` 提取为独立文件。

## 可用脚本

| 命令 | 说明 |
| --- | --- |
| `npm run dev` | 启动开发服务器（端口 3000，HMR） |
| `npm run build` | 生产环境构建 |
| `npm run lint` | ESLint 代码检查 |
| `npm run lint:fix` | ESLint 自动修复 |
| `npm run format` | Prettier 格式化代码 |

## Webpack 配置要点

- **入口**：`src/main.ts`
- **路径别名**：`@` → `src/`，`@utils` → `src/utils/`
- **CSS 处理**：开发环境用 `style-loader`，生产环境用 `MiniCssExtractPlugin.loader`
- **Less 支持**：`less-loader` → `css-loader` → `style-loader`
- **图片资源**：使用 asset module，小于 8KB 转 base64，大于 8KB 复制到 `dist/assets/`
- **TypeScript**：通过 `babel-loader` + `@babel/preset-typescript` 编译
- **ESLint 集成**：`eslint-webpack-plugin` 在开发/构建时自动检查代码
- **Source Map**：开发环境使用 `eval-cheap-module-source-map`

## 代码规范

项目集成了 ESLint + Prettier，两者协同工作：

- **ESLint**：负责代码质量检查（未使用变量、类型错误等）
- **Prettier**：负责代码格式化（缩进、分号、引号风格等）
- **eslint-config-prettier**：关闭 ESLint 中与 Prettier 冲突的规则
- **eslint-plugin-prettier**：将 Prettier 格式检查集成到 ESLint 中

详细的集成教程请参考 [step.md](./step.md)。

## 编辑器配置

项目内置了 `.vscode/settings.json`，在 VS Code / Cursor 中可实现：

- 保存时自动 Prettier 格式化
- 保存时自动 ESLint 修复

建议安装扩展：

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)