create-react-app创建的项目中设置webpack配置

 create-react-app 创建的项目默认使用的是 react-scripts(存在于node_modules文件夹中)来处理开发服务器和构建,它内置了一些webpack相关配置。一般不会暴露出来给开发者,但是在有些情况下我们需要修改下webpack默认配置,如修改outputPath、sourcemap方案等,但由于 eject是不可逆的,所以craco插件应运而生,为我们提供了更好的解决方案。

craco(Create React App Configuration Override)用来自定义由 create-react-app 创建的项目内部配置,比如修改 webpack 配置,覆盖react-scripts的默认设置。

安装:

npm install  @craco/craco react-app-rewire-alias(建议安装在dependencies中)

 配置:

 在项目根目录下创建 craco.config.js 文件,并且在package.json文件中修改一些配置如下:

// 将如下模块代码
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts  build",
    "test": "react-scripts  test",
    "eject": "react-scripts eject"
  },
// 换成
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

 craco.config.js 文件配置:

const path = require("path");
const { CracoAliasPlugin } = require("react-app-rewire-alias");
 
module.exports = {
  // webpack 配置
  webpack: {
    // 配置内容
  },
  // 配置别名
  plugins: [
    // 配置内容
  ],
};

以上配置完成后重启项目

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/742349.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

YOLOv5改进 | SPPF | 具有多尺度带孔卷积层的ASPP【CVPR2018】

💡💡💡本专栏所有程序均经过测试,可成功执行💡💡💡 专栏目录: 《YOLOv5入门 改进涨点》专栏介绍 & 专栏目录 |目前已有40篇内容,内含各种Head检测头、损失函数Loss、…

设计模式5-策略模式(Strategy)

设计模式5-策略模式 简介目的定义结构策略模式的结构要点 举例说明1. 策略接口2. 具体策略类3. 上下文类4. 客户端代码 策略模式的反例没有使用策略模式的代码 对比分析 简介 策略模式也是属于组件协作模式一种。现代软件专业分工之后的第一个结果是框架语音应用程序的划分。组…

WEB界面上使用ChatGPT

(作者:陈玓玏) 开源项目,欢迎star哦,https://github.com/tencentmusic/cube-studio 随着大模型不断发展,现在无论写代码,做设计,甚至老师备课、评卷都可以通过AI大模型来实现了&…

【数据结构与算法】动态查找表(二叉排序树,二叉平衡树)详解

二叉排序树的数据结构。 struct TreeNode {ElemType data;TreeNode *left, *right; }; using BiTree TreeNode *;结构体包含三个成员: data 是一个 ElemType 类型的变量,用于存储二叉搜索树节点的数据。left 是一个指向 TreeNode 类型的指针&#xff…

【Pandas驯化-16】一文搞懂Pandas中高性能query、eval函数技巧

【Pandas驯化-16】一文搞懂Pandas中高性能query、eval函数技巧 本次修炼方法请往下查看 🌈 欢迎莅临我的个人主页 👈这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合,智慧小天地! 🎇 相关内容文档获取 微信公众…

Linux命令学习2

一.文件基础命令 1.alias-给某个命令取别名 使用方式:alias cl ls -la 说明:将ls -la命令取别名为cl,使用这种方式只是临时将命令取别名,重启中断后,就会失效。 问题1:如何永久性的设置命令的别名? 答…

生命在于学习——Python人工智能原理(4.3)

三、Python的数据类型 3.1 python的基本数据类型 3.1.4 布尔值(bool) 在Python中,布尔值是表示真或假的数据类型,有两个取值,True和False,布尔值常用于控制流程、条件判断和逻辑运算,本质上来…

ONLYOFFICE 桌面编辑器 8.1全新发布,更强大的编辑工具

ONLYOFFICE 8.1 一、什么是ONLYOFFICE?二、怎么安装 ONLYOFFICE 8.1三、主要功能介绍四、总结 一、什么是ONLYOFFICE? ONLYOFFICE 是一款功能强大的办公套件,旨在提供全面的文档、表格和演示文稿编辑解决方案。它集成了文字处理、电子表格和演…

基于 Native 技术加速 Spark 计算引擎

本文整理自 2024 年 6 月 DataFunSummit 2024 OLAP 架构峰会 Lakehouse 湖仓一体化架构论坛的同名主题分享。 今天分享的主题是基于 Native 技术加速 Spark 计算引擎,大家将会了解到如何基于 ClickHouse 来改造 Spark 引擎,最终获得较为可观的性能提升。…

正则表达式以及文本三剑客grep、sed、awk

正则表达式匹配的是文本内容,文本三剑客都是针对文本内容。 grep:过滤文本内容 sed:针对文本内容进行增删改查 awk:按行取列 一、grep grep的作用使用正则表达式来匹配文本内容 1、grep选项 -m:匹配几次之后停止…

第10章 启动过程组 (启动过程组的重点工作)

第10章 启动过程组 10.3启动过程组的重点工作,在第三版教材第362~364页; 文字图片音频方式 第一个知识点:项目启动会议 1、作用 标志着对项目经理责权的定义结果的正式公布,通常由项目经理负责组织和召开。2、目的 使项目各…

2024 cicsn 西南赛区 半决赛

文章目录 前言mcmf结构定义添加边遍历邻接点示例场景解决步骤1. 初始化2. 应用SPFA找最小费用增广路径 3. 增广操作4. 终止条件 结果分析 逆向maincaldeladdedit 思路expvlunexp qeme启动不行保护逆向 题目给的脚本模版 前言 不能联网搜是真坐牢 本来想等着全写了再发的&#…

我终于毕业啦!

2024-6-24,星期一,19:21,天气:阴转小雨,心情:晴。大家好啊,“失踪人员”回归啦,整整断更了两周,这两周发生了很多事,第一件就是我的毕业答辩通过啦&#xff0…

python-题库篇-Python语言特性

文章目录 Python语言特性1 Python的函数参数传递2 Python中的元类(metaclass)3 staticmethod和classmethod4 类变量和实例变量5 Python自省6 字典推导式7 Python中单下划线和双下划线8 字符串格式化:%和.format9 迭代器和生成器10 *args and **kwargs11 面向切面编程AOP和装饰器…

Element 进度条样式优化

在开发后台管理系统时,经常会用到进度条这样一个控件,Element UI中提供了progress这样一个组件,如下图所示: 该组件默认的颜色会比较单一,为此时常需要对该组件的样式进行一些优化,以满足实际项目的需求。 …

【华为HCIA数通网络工程师真题-构建以太网交换网络】

华为HCIA数通网络工程师真题-构建以太网交换网络 一、1-10题 一、1-10题 1、如图所示,四台交换机都运行 STP,各种参数都采用默认值如果交换机C的G0/0/2端口发生阻塞并无法通过该端口发送配置 BPDU,则网络中 blocked 端口多久之后会进入到转发…

【Linux】动/静态库的创建和使用

目录 一、动/静态库的概念回顾: 二、动态库与静态库的区别: 三、静态库的创建与使用: 1、Linux静态库命名规则: 2、静态库的创建和使用: 四、动态库的创建与使用: 1、Linux动态库命名规则&#xff1…

Mac环境 aab包转apks,并安装apks

一、下载下载bundletool工具 Releases google/bundletool GitHub 二、将下载bundletool.jar包、aab、keystore文件全部放到同一个目录下 例如我全部放到download目录下 转换命令行: java -jar bundletool-all-1.16.0.jar build-apks --modeuniversal --bundle…

「全新升级,性能更强大——ONLYOFFICE 桌面编辑器 8.1 深度评测」

文章目录 一、背景二、界面设计与用户体验三、主要新功能亮点3.1 高效协作处理3.2 共同编辑,毫无压力3.3 批注与提及3.4 追踪更改3.5 比较与合并3.6 管理版本历史 四、性能表现4.1 集成 AI 工具4.2 插件强化 五、用户反馈与使用案例 一、背景 Ascensio System SIA -…

finalize——释放内存

重写 没写的话就按照定义的方法,object的默认方法 system.gc会主动调用垃圾回收器,不会使用finalize方法。需求不大 对于用debug怎么进入jdk源码,ararry.sort的源码进入