# SimulationWebpack2

**Repository Path**: QQXQQ/SimulationWebpack2

## Basic Information

- **Project Name**: SimulationWebpack2
- **Description**: 模拟Webpack
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-31
- **Last Updated**: 2026-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# SimulationWebpack2

#### 介绍

SimulationWebpack2 是一个简易的 Webpack 实现，旨在模拟 Webpack 的核心构建流程。该项目通过手动实现 Webpack 的关键模块，帮助开发者理解 Webpack 内部工作原理，适合学习和研究模块打包器的工作机制。

#### 软件架构

```
SimulationWebpack2
├── bin/
│   └── webpack.js              # 命令行入口文件
├── src/
│   ├── webpack.js              # Webpack 主入口
│   ├── compiler.js             # Compiler 编译器类
│   ├── compilation.js           # Compilation 编译结果类
│   ├── chunk.js                 # Chunk 代码块类
│   ├── normal-module.js         # 普通模块类
│   ├── normal-module-factory.js # 模块工厂类
│   ├── parser.js                # 解析器
│   ├── loader-runner.js         # Loader 运行器
│   ├── entry-option-plugin.js   # 入口选项插件
│   ├── single-entry-plugin.js   # 单入口插件
│   ├── multiple-entry-plugin.js # 多入口插件
│   ├── node/
│   │   └── node-environment-plugin.js # Node 环境插件
│   ├── webpack-options-apply.js # Webpack 配置应用
│   ├── stats.js                 # 统计信息类
│   ├── utils/
│   │   └── common.js            # 通用工具函数
│   └── templates/               # EJS 模板文件
│       ├── main.ejs
│       ├── async-main.ejs
│       ├── defer-main.ejs
│       └── chunk.ejs
├── test/
│   ├── src/                     # 测试源码
│   ├── loaders/                 # 测试用 Loader
│   └── webpack.config.js        # 测试配置
└── package.json
```

#### 核心模块说明

- **Compiler**: 编译器核心，负责整个构建过程的调度和管理
- **Compilation**: 编译结果管理，负责收集模块、创建代码块
- **NormalModule**: 普通模块处理，支持加载器的执行
- **Parser**: 使用 Babylon 解析 JavaScript 代码的 AST
- **LoaderRunner**: Loader 运行器，负责加载和执行各个 Loader
- **Chunk**: 代码块管理，生成最终的打包文件

#### 安装教程

1. 确保已安装 Node.js (建议 v12+)
2. 使用 pnpm 安装依赖：
   ```bash
   pnpm install
   ```
3. 或使用 npm：
   ```bash
   npm install
   ```

#### 使用说明

1. 在项目中创建 webpack.config.js 配置文件
2. 配置入口文件和输出路径
3. 运行构建：
   ```bash
   node bin/webpack.js
   ```
4. 或在 package.json 中添加脚本：
   ```bash
   "build": "node bin/webpack.js"
   ```

#### 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

#### 特技

1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)