![](https://img-blog.csdnimg.cn/20190927151132530.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
基于webpack的React开发实战教程
文章平均质量分 75
从零开始,一步一步使用webpack5和React18搭建一个React前端开发环境,并完成一个博客管理系统的前端开发
全栈探索者
这个作者很懒,什么都没留下…
展开
-
从零开始搭建React+TypeScript+webpack开发环境-集成antd ProComponents
本文主要介绍了如何创建一个后台管理模板,主要目标是在用户提供的登录凭据进行验证后,有效地管理用户会话并将其导航到应用程序的主要部分。通过异步处理和适当的用户反馈,代码提供了良好的用户体验和可维护性。原创 2023-11-12 19:22:58 · 894 阅读 · 1 评论 -
从零开始搭建React+TypeScript+webpack开发环境-基于lerna的webpack项目工程化改造
Lerna 是一个用于管理具有多个包(package)的 JavaScript 项目的工具。它优化了拥有多个包的代码库的工作流程,使得更容易进行本地开发、版本控制和发布。Lerna 可以将大型代码库拆分成多个包,并将这些包存储在单个代码仓库中。每个包都可以独立地进行版本管理和发布。Lerna 支持统一版本和独立版本两种模式。统一版本模式会确保所有包的版本号相同,而独立版本模式允许每个包有不同的版本号。Lerna 提供了一组命令,使得在进行本地开发时能够更轻松地进行包之间的协同工作。原创 2023-11-10 23:50:21 · 1225 阅读 · 0 评论 -
从零开始搭建React+TypeScript+webpack开发环境-性能优化
在本篇文章中,我们深入探讨了React应用的性能优化,特别关注了代码分割和首屏优化的重要性。我们了解了Webpack配置中的关键部分,包括代码分割的配置,MiniCssExtractPlugin 的设置以及输出文件名的哈希化。通过使用代码分割,我们可以将应用的代码拆分成多个块,以便在需要时按需加载,从而提高初始加载性能和用户体验。同时,通过哈希化输出文件名,我们可以实现更好的缓存管理和版本控制,确保浏览器始终加载最新的资源文件。React 18 和Mobx等现代技术的使用使性能优化变得更加容易和强大。原创 2023-11-07 20:50:42 · 963 阅读 · 0 评论 -
从零开始搭建React+TypeScript+webpack开发环境-使用iconfont构建图标库及图标选择器
当开发者构建用户界面时,图标选择器成为一个重要的工具,它们允许用户通过直观的方式为应用程序或网站选择合适的图标。图标不仅仅是页面设计的一部分,更是用户交互的关键元素之一。通过提供一个图标选择器,用户可以轻松地浏览和选择适合其需求的图标,而无需深入研究图标的名称或使用复杂的代码。图标选择器的必要性在于简化用户体验,提高开发效率,并确保应用程序的一致性和专业外观。它们使开发者能够更容易地集成高质量、一致性的图标,而无需花费大量时间在图标的选择和集成上。原创 2023-11-04 22:04:16 · 500 阅读 · 0 评论 -
从零开始搭建React+TypeScript+webpack开发环境-基于axios的Ajax请求工具
一个用于 Axios 请求的配置文件,包括请求拦截和响应拦截器。配置了基本URL、授权、错误处理、刷新令牌和网络错误通知。原创 2023-11-04 23:00:21 · 671 阅读 · 0 评论 -
从零开始搭建React+TypeScript+webpack开发环境-嵌套路由表
【代码】从零开始搭建React+TypeScript+webpack开发环境-嵌套路由表。原创 2023-10-30 22:02:46 · 814 阅读 · 0 评论 -
从零开始搭建React+TypeScript+webpack开发环境-代码规约(基于eslint和stylelint)
从零开始搭建React+TypeScript+webpack开发环境-代码规约(基于eslint和stylelint)原创 2023-10-29 16:52:01 · 190 阅读 · 0 评论 -
从零开始搭建React+TypeScript+webpack开发环境-基础配置
return {visitor: {if () {${return {const {// 检查 state.file.metadata 是否存在,不存在则初始化为空对象 if(!} // 检查 state.file.metadata.fileModules 是否存在,不存在则初始化为空数组 if(!} // 将需要启用 CSS Modules 的文件路径保存到文件属性中 const filePath = state . file . opts . filename;原创 2023-10-29 16:23:36 · 278 阅读 · 0 评论