【源码】基于Webpack框架的React TypeScript项目

项目简介

本项目借助Webpack框架，实现了React、TypeScript以及CSS、LESS、SCSS、图片、字体等资源的高效打包与压缩。集成了antd组件库的按需加载与自定义主题功能，同时运用ESLint进行代码格式化与校验，通过Husky实现代码提交校验，保障代码质量。

项目的主要特性和功能

1. Webpack配置：实现React、TypeScript、CSS、LESS、SCSS、图片、字体等资源的高效打包与压缩。
2. antd按需加载与自定义主题：利用babel-plugin-import插件实现antd组件库按需加载，通过Webpack的less-loader配置支持antd自定义主题。
3. ESLint代码格式化与校验：借助.eslintrc.json配置文件进行代码格式化与校验，结合Husky实现代码提交校验。
4. 路径别名：通过Webpack的resolve.alias配置设置路径别名，方便代码引用。
5. 资源模块：运用Webpack 5的资源模块功能，无需额外loader处理图片、字体等资源。
6. CSS模块化：支持CSS、LESS、SCSS的模块化导入，避免样式冲突。
7. 代码压缩：使用css-minimizer-webpack-plugin和terser-webpack-plugin插件实现CSS和JS代码压缩。

安装使用步骤

初始化项目

使用npm init -y生成package.json文件。

安装依赖

使用yarn或npm安装项目所需的依赖包。 bash yarn install

运行项目

使用以下命令启动项目： bash yarn start 项目将运行在开发模式下，默认端口为9102。

打包项目

使用以下命令进行生产环境打包： bash yarn build 打包后的文件将生成在dist目录下。

验证配置

通过访问项目地址，验证Webpack打包配置的正确性。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】