%20(2).svg)
项目简介
本项目基于 Webpack 框架搭建，整合 React 与 TypeScript。借助 Webpack 的强大打包能力，结合 Babel、PostCSS 等工具，可对 React、TypeScript 代码以及 CSS、LESS、SCSS 样式文件进行编译处理。同时集成 antd 组件库，实现按需加载与自定义主题，还配置了 ESLint 代码检查、husky 提交校验等功能，为前端项目开发提供全面高效的解决方案。
项目的主要特性和功能
- 多种语言及框架支持：支持 React 框架，采用 TypeScript 开发，增强代码类型安全性与可维护性。
- 资源处理：可对 CSS、LESS、SCSS 样式文件编译、模块化处理和压缩，处理图片、字体等资源，支持资源内联和单独打包。
- 组件库配置：集成 antd 组件库，按需加载减小打包体积，可自定义主题颜色和样式。
- 代码优化：通过 Externals 排除特定依赖，压缩 JS 和 CSS，提高加载速度。
- 缓存机制：将第三方库提取到单独 chunk 文件，利用长效缓存减少请求次数。
- 代码规范：使用 ESLint 检查代码风格与错误，配合 Prettier 格式化代码，通过 husky 在提交时校验。
- 开发体验：提供开发服务器，支持热更新和友好控制台输出，有编译进度条监控打包过程。
安装使用步骤
前提条件
确保已安装 Node.js 和 npm 或 yarn，且已下载项目源码文件。
安装依赖
在项目根目录下，使用以下命令安装所需依赖：
bash
yarn install
或者
bash
npm install
启动开发环境
使用以下命令启动开发服务器：
bash
npm start
或者
bash
yarn start
启动后，在浏览器中访问 http://localhost:9102 查看项目。
打包项目
使用以下命令进行生产环境打包：
bash
npm run build
或者
bash
yarn build
打包后的文件将输出到 dist 目录。
代码校验
在编写代码时，ESLint 会自动进行代码检查。若要手动运行校验，可使用以下命令：
bash
npm test
或者
bash
yarn test
提交代码
在提交代码时，husky 会自动触发 ESLint 校验，若代码存在不符合规范的地方，提交将被阻止。可通过以下命令尝试自动修复部分错误：
bash
npx eslint./src --ext ts,tsx,js,jsx --fix
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】