# yuma-solid-webpack-app

**Repository Path**: ruidong/yuma-solid-webpack-app

## Basic Information

- **Project Name**: yuma-solid-webpack-app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Solid.js Webpack App

一个现代化的 Solid.js + Webpack + Tailwind CSS 项目模板，支持热更新、代码分割、生产优化等完整功能。

## 🚀 快速开始

### 安装依赖
```bash
npm install
```

### 开发模式
```bash
npm run dev
# 或
npm start
```
启动开发服务器，自动打开浏览器，支持热模块替换 (HMR)。

### 生产构建
```bash
npm run build
```
生成优化后的生产环境代码。

### 开发构建
```bash
npm run build:dev
```
使用开发配置构建，用于调试构建过程。

## 📁 项目结构

```
solid-webpack-app/
├── src/                    # 源代码目录
│   ├── components/         # 可复用组件
│   ├── pages/             # 页面组件
│   ├── lib/assets/        # 静态资源（图片、图标等）
│   ├── index.jsx          # 应用入口
│   ├── index.html         # HTML 模板
│   └── index.css          # 全局样式
├── public/                # 公共文件
├── webpack.common.js      # Webpack 公共配置
├── webpack.dev.js         # Webpack 开发配置
├── webpack.prod.js        # Webpack 生产配置
├── babel.config.js        # Babel 配置
├── tailwind.config.js     # Tailwind CSS 配置
├── postcss.config.js      # PostCSS 配置
└── package.json          # 项目配置
```

## ⚙️ 运行配置

### 脚本命令

| 命令 | 描述 | 配置文件 |
|------|------|----------|
| `npm start` | 启动开发服务器并自动打开浏览器 | webpack.dev.js |
| `npm run dev` | 启动开发服务器 | webpack.dev.js |
| `npm run build` | 构建生产环境代码 | webpack.prod.js |
| `npm run build:dev` | 构建开发环境代码 | webpack.dev.js |

### 开发服务器配置

- **端口**: 默认使用 Webpack DevServer 的自动端口（通常从 8080 开始）
- **热更新**: 启用 HMR（Hot Module Replacement）
- **自动打开**: 启动时自动在默认浏览器中打开应用
- **压缩**: 开发环境禁用 Gzip 压缩以降低 CPU 占用

## 🔧 Webpack 配置详解

### 公共配置 (webpack.common.js)

#### 入口配置
```javascript
entry: './src/index.jsx'
```
指定应用入口文件，Webpack 从此文件开始递归解析依赖。

#### 模块解析优化
```javascript
resolve: {
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
    modules: ['node_modules'],
    alias: {
        '@': path.resolve(__dirname, 'src'),
        '@components': path.resolve(__dirname, 'src/components'),
        '@pages': path.resolve(__dirname, 'src/pages'),
        '@assets': path.resolve(__dirname, 'src/lib/assets'),
        '@utils': path.resolve(__dirname, 'src/utils'),
        '@lib': path.resolve(__dirname, 'src/lib')
    },
    fallback: {
        "path": require.resolve("path-browserify"),
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "buffer": require.resolve("buffer/"),
        "util": require.resolve("util/"),
        "process": require.resolve("process/browser")
    }
}
```

**特性说明：**
- **自动扩展名**: 引入模块时可省略文件后缀
- **路径别名**: 使用 `@` 开头的别名简化导入路径
- **Node.js Polyfill**: 为浏览器环境提供 Node.js 核心模块的兼容性支持

#### 模块处理规则
- **JS/JSX**: 使用 Babel 转译，支持 Solid.js 和 ES6+ 语法
- **CSS**: 支持 CSS 文件导入，自动处理 PostCSS
- **资源文件**: 支持图片、字体等静态资源的导入

### 开发配置 (webpack.dev.js)

#### 开发模式优化
```javascript
mode: 'development',
devtool: 'eval-cheap-module-source-map'
```

#### 持久化缓存
```javascript
cache: {
    type: 'filesystem',
    buildDependencies: {
        config: [__filename]
    },
    name: 'dev-cache'
}
```
大幅提升二次构建速度。

#### 按需编译
```javascript
experiments: {
    lazyCompilation: true
}
```
只编译实际使用的模块，减少初始构建时间。

#### 开发服务器特性
- **热模块替换 (HMR)**: 修改代码后无需刷新页面即可看到变化
- **错误覆盖层**: 编译错误时显示友好的错误界面
- **Source Map**: 提供高质量的源码映射，便于调试

#### 代码分割策略
```javascript
splitChunks: {
    chunks: 'all',
    cacheGroups: {
        vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            priority: 10,
            reuseExistingChunk: true,
            enforce: true
        },
        common: {
            minChunks: 2,
            priority: 5,
            reuseExistingChunk: true
        }
    }
}
```
- **Vendor 分割**: 将第三方库提取到单独 chunk，利用缓存
- **公共代码**: 被引用 2 次以上的代码提取到公共 chunk

### 生产配置 (webpack.prod.js)

#### 生产模式优化
```javascript
mode: 'production',
devtool: 'hidden-source-map'
```
自动启用 Tree Shaking、Scope Hoisting 等优化。

#### 代码压缩
- **JS 压缩**: 使用 TerserPlugin，支持多进程并行压缩
- **CSS 压缩**: 使用 CssMinimizerPlugin，移除注释和空白
- **Console 清理**: 自动移除 console.log 等调试代码

#### 资源优化
- **Gzip 压缩**: 自动生成 .gz 文件，减少传输体积
- **Brotli 压缩**: 支持更高效的 Brotli 算法
- **图片优化**: 支持图片压缩和格式转换

#### 包体积分析
集成 webpack-bundle-analyzer，可通过环境变量启用：
```bash
ANALYZE=true npm run build
```

## 🎨 样式配置

### Tailwind CSS
- **内容扫描**: 自动扫描模板文件中的类名
- **DaisyUI**: 集成 DaisyUI 组件库，提供美观的 UI 组件
- **表单插件**: 使用 @tailwindcss/forms 优化表单样式

### PostCSS
- **自动前缀**: 使用 autoprefixer 自动添加浏览器前缀
- **Tailwind 集成**: 支持 Tailwind CSS 的 PostCSS 插件

## 📦 依赖说明

### 核心依赖
- **solid-js**: Solid.js 框架核心
- **@solidjs/router**: Solid.js 官方路由库

### 开发依赖
- **Webpack 相关**: webpack、webpack-cli、webpack-dev-server、webpack-merge
- **Babel 相关**: @babel/core、@babel/preset-env、babel-preset-solid、babel-loader
- **样式相关**: tailwindcss、daisyui、@tailwindcss/forms、@tailwindcss/postcss、autoprefixer、postcss、postcss-loader
- **加载器**: css-loader、style-loader、mini-css-extract-plugin
- **插件**: html-webpack-plugin、compression-webpack-plugin、css-minimizer-webpack-plugin、terser-webpack-plugin
- **工具**: webpack-bundle-analyzer

## 🔍 性能优化特性

1. **热更新优化**: 禁用 Gzip 压缩，降低 CPU 占用
2. **按需编译**: 只编译实际使用的模块
3. **持久化缓存**: 文件系统级别的构建缓存
4. **代码分割**: 智能的 vendor 和公共代码分割
5. **资源压缩**: 多算法压缩支持（Gzip + Brotli）
6. **Tree Shaking**: 自动移除未使用的代码
7. **作用域提升**: 减少闭包和函数声明，提升运行性能

## 🚀 CLI 工具

本项目同时提供 CLI 工具，可通过以下方式使用：

```bash
npx yuma-solid-webpack-app my-app
```

CLI 会自动：
- 创建项目目录
- 复制所有配置文件和源码
- 自动将 `_babelrc` 重命名为 `.babelrc`
- 自动将 `_gitignore` 重命名为 `.gitignore`
- 初始化 Git 仓库（可选）

## 📄 许可证

MIT License - 详见 [LICENSE](LICENSE) 文件