create-react-app使用v5版本创建项目，运行输出很多webpake日志

已于 2022-03-03 10:08:50 修改
阅读量589 收藏
点赞数
分类专栏： React 文章标签： react.js 前端 javascript
于 2022-03-03 10:05:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46662539/article/details/123246524
版权
在尝试使用create-react-app v5创建React demo时，遇到大量Webpack日志输出的问题。该问题可能由于Webpack v5不再填充节点内置包导致。临时解决方案是将'react-scripts'降级到4.0.3版本，但这可能导致eslint配置等其他不可控bug。建议等待更稳定的老版本脚手架或官方修复。
摘要由CSDN通过智能技术生成

昨天自己准备做一个react的demo，复习一下。

使用了create-react-app v5版本，发现会莫名的出现一堆webpake日志
在这里插入图片描述
经过排查发现是因为create-react-app v5导致的问题，你也可以手动修改**“react-scripts”: "5.0.0"为4.0.3版本**，可以暂时解决日志输出的问题。但是不建议这么做。

因为后期会出现一些不可控的bug，例如eslint的配置。

猜测出现日志输出的问题是因为webpack v5不再填充节点内置包导致的。

可以参考github

建议还是使用老的脚手架版本进行使用，需要升级的小伙伴可以在等等。毕竟是新版本，很多问题还是在test中。

前端攻城狮J
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【H5】create-react-app
BestpayTech的博客
05-26 297
create-react-app脚手架搭建react项目 Quick Start（快速入门） 全局安装 首先确保你电脑上安装最新的版本 #全局安装 npm install -g create-react-app #构建一个my-app的项目 npx create-react-app my-app cd my-app 启动编译当前的React项目，并自动打开 http://localhost:3000/ npm start 以上命令执行完成后，则自动打开： http://localhost:3000/ 如果你
create-react-app 5.0: Invalid Options for PostCSS Loader
m0_49986452的博客
05-06 435
customize-cra version: 1.0.0 create-react-app version: 5.0.0 报错 ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. 解决办法（在addLessLoader之后） adjustStyleLoaders(({ use:
从0到1使用 Webpack5 + React + TS 构建标准化应用
阿里云技术
09-07 551
本篇文章主要讲解如何从一个空目录开始，建立起一个基于webpack + react + typescript的标准化前端应用。
React修行日志（一）
ZhangGQ专栏
08-19 203
目录关于React当前前端三大主流框架DIFF算法Node.jswebpack项目的创建 关于React React 是一个用于构建用户界面的 JAVASCRIPT 库； React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）； React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源； React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它； 当前前端三大主流框架 Angular.js 较
从零开始使用 webpack5.x 搭建 react 项目
木槿小凡的博客
06-26 1326
搭建一个react-webpack框架 环境： webpack 5.x 疑问：明明已经有create-react-app脚手架了，为何还要自己去用webpack去重新做一个脚手架？ 当然，create-react-app是一个很棒的脚手架了，我们查看其源码，知道其也是在webpack基础上封装的一个脚手架工具，再细看其配置内容，就知道为何需要自己封装一个自己的框架了。 1.因为其在打包时，是将node_module目录下所有包都打包到一个vender.chunk里的，而所有自定义的js部分，都打包到一
react create-react-app v5 从零搭建（使用 npm run eject）_react app
最新发布
2401_83739821的博客
04-18 976
本书第﹖版以最新的Ubuntu 12.04为版本，循序渐进地向读者介绍了Linux 的基础应用、系统管理、网络应用、娱乐和办公、程序开发、服务器配置、系统安全等。需要《Linux入门到精通》、《linux系统移植》、《Linux驱动开发入门实战》、《Linux开源网络全栈》电子书籍及教程的工程师朋友们劳烦您转发+评论。需要《Linux入门到精通》、《linux系统移植》、《Linux驱动开发入门实战》、《Linux开源网络全栈》电子书籍及教程的工程师朋友们劳烦您转发+评论。//px2rem的配置。
使用脚手架创建react项目以及webpack相关配置
YoungMan_09的博客
02-21 896
create-react-app 文档地址：https://create-react-app.dev/ npm i create-react-app 包名
react-router 源码及原理解析 v5版本
小王的技术库
08-12 531
前言，首先为什么要做react-router源码解析呢，因为之前我们有一个需求，左侧导航栏检测到路由变化的时候展示不同的样式。由于左侧导航栏没有包裹到路由Router组件中，所以左侧导航栏无法准确监测路由发生了变化，当时我想了想可以这样解决。...
react_styled-components-v5:使用样式化组件v5的基本React应用
04-03
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何...
react-luo：自动React-保持最新技术react17钩住router5 webpack5 babel7 antd4
02-05
自动React这是一个React脚手架，没有使用create-react-app标准的React + Redux分级结构经过了多个项目的实践，不停的更新和优化出来的。目前自己做项目同时用。 PWA，挂钩，代码分割，热替换，HappyPack多线程编译...
react-reactlog在你的浏览器console中使用React
08-14
react-log: 在你的浏览器console中使用React
windows下create-react-app 升级至3.3.1版本踩坑记
10-15
主要介绍了windows下create-react-app 升级至3.3.1版本踩坑记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在react当中我们如何实现单表的简单日志功能？
qq_53509791的博客
03-31 444
在date组件当中，我们是通过onchang方法，在input当中我们是使用onblurs的方法，在select组件当中我们使用的是onselect的方法，来进行失去焦点以后数据的一个获取。然后我们这边的数据更新的话使用的是antd的date和input、select的组件，然后我们需要在我们的这几个边框当中定义监听事件来监听数据的变化。首先我们需要在我们的Modal的中流出空余的位置来显示我们更新数据之后的显示日志的地方。这里我们使用的是一个antd里面的modal弹框和一个tabs的一个组件。
使用create-react-app构建项目（webpack+antd+scss）
rainbow_677294的博客
09-20 1496
1.安装脚手架 $ npm install -g create-react-app 2.通过脚手架搭建项目 $ create-react-app <项目名称> 3.开始项目 $ cd <项目名称> 4.常用脚本命令说明 $ npm run start :开始项目，通过http://localhost:3000可进行访问 $ npm run build...
You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1）
业余前端的职业经历
08-08 690
然后就是 在哪个 .npm-global 里面 我这个可能是通过yarn安装的全局依赖 但是npm 安装应该和这个区别不大。删除那个全局依赖之后 你就可以使用 npx create-react-app（首先你本地的这个版本不要过低哈）现在安装 react项目其实都不建议你全局安装这个 create-react-app 了。这个时候建议你去找到那个 create-react-app的全局安装包。就是我的npm安装create-react-app一直抱着个问题。把它删除掉 （我这个是mac本）...
前端react记录
ttyt1217的专栏
07-11 376
vite脚手架搭建 react框架 以及 部署dist到服务器
react笔记之学习之props父子传值
geyaoisnice的博客
11-27 153
前端
插入排序笔记
qq_37350725的博客
02-10 123
找出数组中重复的数字。 在一个长度为 n 的数组 nums 里的所有数字都在 0～n-1 的范围内。数组中某些数字是重复的，但不知道有几个数字重复了，也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。 示例 1： 输入： [2, 3, 1, 0, 2, 5, 3] 输出：2 或 3 class Solution { public: int findRepeatNumber(vector<int>& nums) { unordered_map<
手把手教你搭建 Webpack 5 + React 项目
小柒的前端之旅
05-03 3313
在平时工作中，为减少开发成本，一般都会使用脚手架来进行开发，比如。脚手架都会帮我们配置好了 webpack，但如果想自己搭建 webpack 项目要怎么做呢？
React开发利器：create-react-app深度解析
- **简洁的安装过程**：只需一条`npm install -g create-react-app`命令即可全局安装，然后使用`create-react-app my-app`创建项目，极大地简化了项目的初始构建。 - **零配置**：`create-react-app`处理了所有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值