【源码】基于 webpack5 框架的 react18 开发脚手架

项目简介

本项目是基于 webpack5 搭建的 react18 开发脚手架，提供了丰富的配置与插件，采用最新的 React 18 版本，搭配现代化开发工具和技术栈，可有效提升开发效率和代码质量。

项目的主要特性和功能

Webpack 配置

• 运用 webpack-merge 简化开发和生产环境的配置合并。
• 构建时通过 clean-webpack-plugin 清理输出目录。
• 利用 html-webpack-plugin 生成 HTML 文件。
• 采用 mini-css-extract-plugin 提取 CSS 到单独文件。
• 使用 css-minimizer-webpack-plugin 和 terser-webpack-plugin 优化和最小化 CSS 与 JS 代码。

Babel 配置

• 以 @babel/core 作为转换核心。
• 支持 class 上添加属性及 Object rest spread 等语法特性。
• 预设 @babel/preset-env，可根据目标环境自动选择 Babel 插件。

Loaders 和 Plugins

• 用 babel-loader 处理 JS 文件。
• 用 postcss-loader 处理 CSS 文件。
• 用 style-loader 和 css-loader 插入 CSS 到 DOM 或解析 import 和 url。
• 用 friendly-errors-webpack-plugin 优化编译时命令行日志显示。
• 集成 ESLint 检查代码质量和风格，集成 Prettier 格式化代码。

开发体验优化

• 提供支持热重载的本地开发服务器。
• 提供生产环境打包命令，方便部署。
• 集成 TailwindCSS 作为 CSS 框架，实现高效样式开发。

安装使用步骤

安装依赖

在项目根目录下运行以下命令安装依赖： bash npm install 或者 yarn install

启动本地服务

bash npm run dev 或者 yarn dev 默认打开端口是: localhost:8080

生产打包

bash npm run build 或者 yarn build

下载地址

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