当前位置: 首页 > news >正文

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: [// 配置内容],
};

以上配置完成后重启项目

相关文章:

  • 【科技前沿】电子设计新贵SmartEDA:为何它引领行业风潮?
  • 物联网 IoT 收录
  • 等保测评练习10
  • 程序员系统入门大模型的路径和资源,看这篇就够了
  • 道路救援小程序源码
  • 把sql拿到数据库中执行,和程序返回的值不一样??????
  • 深度学习工具jupyter的new没有环境选项以及遇到的EnvironmentLocationNotFound:Not such a environment
  • Nginx实现动静分离
  • 赋能AI未来,景联文科技推出高质量亿级教育题库、多轮对话以及心理大模型数据
  • 信息检索(53):Document Expansion by Query Prediction
  • Spring框架学习笔记(本地印象笔记搬运)(整理中)
  • TensorRT-LLM加速框架的基本使用
  • 数据库原理与安全复习笔记(未完待续)
  • 【Linux】使用 iptables 验证访问HDFS 所使用到的端口
  • 光纤通讯资料收集
  • 【Linux系统编程】快速查找errno错误码信息
  • Android优雅地处理按钮重复点击
  • docker-consul
  • extjs4学习之配置
  • Golang-长连接-状态推送
  • javascript从右向左截取指定位数字符的3种方法
  • Magento 1.x 中文订单打印乱码
  • Redis 中的布隆过滤器
  • vue从创建到完整的饿了么(18)购物车详细信息的展示与删除
  • vue数据传递--我有特殊的实现技巧
  • 简析gRPC client 连接管理
  • 算法之不定期更新(一)(2018-04-12)
  • 我与Jetbrains的这些年
  • 教程:使用iPhone相机和openCV来完成3D重建(第一部分) ...
  • ​HTTP与HTTPS:网络通信的安全卫士
  • ​iOS实时查看App运行日志
  • ​Linux·i2c驱动架构​
  • #APPINVENTOR学习记录
  • (C#)if (this == null)?你在逗我,this 怎么可能为 null!用 IL 编译和反编译看穿一切
  • (pojstep1.1.2)2654(直叙式模拟)
  • (WSI分类)WSI分类文献小综述 2024
  • (牛客腾讯思维编程题)编码编码分组打印下标题目分析
  • .NetCore部署微服务(二)
  • .NET开源全面方便的第三方登录组件集合 - MrHuo.OAuth
  • .net项目IIS、VS 附加进程调试
  • .NET中GET与SET的用法
  • .NET中使用Protobuffer 实现序列化和反序列化
  • .sh文件怎么运行_创建优化的Go镜像文件以及踩过的坑
  • /proc/stat文件详解(翻译)
  • []error LNK2001: unresolved external symbol _m
  • [20161214]如何确定dbid.txt
  • [AIGC] 解题神器:Python中常用的高级数据结构
  • [ASP.NET MVC]如何定制Numeric属性/字段验证消息
  • [BZOJ 3531][Sdoi2014]旅行(树链剖分+线段树)
  • [bzoj1901]: Zju2112 Dynamic Rankings
  • [C#基础知识]专题十三:全面解析对象集合初始化器、匿名类型和隐式类型
  • [C++] new和delete
  • [CSS]盒子模型
  • [iOS]-UIKit
  • [javaSE] 看知乎学习工厂模式