# react_ts_webpack

**Repository Path**: carloslst/react_ts_webpack

## Basic Information

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

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-07-26
- **Last Updated**: 2025-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, webpack, TypeScript, Ant-Design, driverjs

## README

# react_ts_webpack

#### 介绍
1. react后台管理项目(简单的)
2. 插件/脚本下载功能(后端考虑采用python)
3. 考虑加入低代码/模板编辑器 结合AI使用（后面看是否考虑用pnpm monorepo）
4. .....后面考虑加入其他功能
5. pages/charts 图表主要采用的是d3js


### 准备
    node >= 18.20.0

#### 技术
    react18.x + webpack5 + typescript + antd


#### 安装教程

1.  npm i
2.  npm run dev:dev
3.  xxxx

#### 问题说明

1.  vscode setting
```json
    "typescript.tsdk": "node_modules/typescript/lib", "typescript.enablePromptUseWorkspaceTsdk": true
```

2.  有点奇怪css module没生效 暂时不采用css module
```tsx
import * as styles from './login.module.css'; // 这样导入才生效
import styles from './login.module.css'; // 直接这样没生效？

// 解决方案：
{
  test:  /\.(s[ac]ss)$/i, //匹配所有的 scss 文件
  // include: [path.resolve(__dirname, '../src')],
  use: [
      isDev ? 'style-loader' : MiniCssExtractPlugin.loader, // 开发环境使用style-looader,打包模式抽离css
      // 'css-loader',
      {
      loader: 'css-loader',
      options: {  
          modules: {
          namedExport: false,  // 在webpack5 官网是默认是false， 默认感觉没生效，手动设置后解决
          exportLocalsConvention: 'camelCase'
          }, // 开启 CSS Modules
      }, 
      },
      
      'postcss-loader',
      // 将 Sass 编译成 CSS
      'sass-loader'
    ]
},

3.  xxxx