开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

添加带有react-app-rewired和customize cra的Webpack别名

react-app-rewired和customize-cra是两个在React项目中常用的工具，用于自定义和修改Create React App（CRA）的Webpack配置。

react-app-rewired：
- 概念：react-app-rewired是一个扩展Create React App（CRA）的工具，允许开发者修改Webpack配置而无需eject项目。
- 优势：通过react-app-rewired，开发者可以根据项目需求自定义Webpack配置，如添加别名、修改Loader和Plugin等。
- 应用场景：适用于需要对Create React App的默认Webpack配置进行细粒度调整的场景，如添加自定义Webpack别名。

customize-cra：
- 概念：customize-cra是一个用于修改Create React App（CRA）的配置的工具。它可以通过一系列预定义的API来修改Webpack配置。
- 优势：customize-cra提供了一种非常方便的方式来扩展和修改CRA的Webpack配置，而无需手动操作Webpack配置文件。
- 应用场景：适用于需要在不eject Create React App的情况下修改Webpack配置的场景，如添加Webpack别名。

对于添加带有react-app-rewired和customize-cra的Webpack别名，可以按照以下步骤进行操作：

在项目中安装react-app-rewired和customize-cra：
在项目中安装react-app-rewired和customize-cra：
在项目根目录下创建一个config-overrides.js文件，用于存放Webpack配置的修改。
在项目根目录下创建一个config-overrides.js文件，用于存放Webpack配置的修改。
修改package.json文件中的scripts，将"react-scripts"替换为"react-app-rewired"。
修改package.json文件中的scripts，将"react-scripts"替换为"react-app-rewired"。

现在，您可以在项目中使用别名来引用模块。例如，在您的代码中，可以这样导入：

import Button from '@components/Button';
import utils from '@utils/utils';

这样就完成了添加带有react-app-rewired和customize-cra的Webpack别名的操作。

推荐的腾讯云相关产品：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能：https://cloud.tencent.com/product/ai

相关搜索:带有webpack和vue-cli的Favicon 带有JSP和Webpack前端的Struts和Jersey Servlet 带有exists和union all的MySQL子查询别名带有文件加载器的eot文件中的SyntaxError和webpack 如何使用带有knockout和webpack的google地图异步回调？使用带有vue2的quill模块-editor和webpack mix 带有"target：'node'“和"type：'module'”的Webpack配置抛出了'require is not defined‘带有redux和react的webpack-dev-server阻塞了我的输入添加带有express和node js的css 在bash_profile中添加带有数字的git别名不起作用如何使用jquery添加和删除带有按钮的行？如何添加带有向上和向下箭头的面板折叠带有验证和存储的Laravel表单Jquery添加html元素使用带有记录集的Access VBA和SQL添加和删除记录 Panda添加带有字符串和整数的sum行使用Wordpress API和Javascript库添加带有媒体的帖子带有Sql的默认power app缺少添加、编辑和删除功能如何使用JavaScript每次添加和删除带有新值的新行？将美国边界和缩写添加到带有县区域的USmap 如何在带有node和reactjs的mongoose数组中添加注释？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

React菜鸟进阶史之构建项目

我选择的必要的依赖有 axios 网络请求库，less和less-loader库等等。...2.1 非webpack 配置方式配置 less 安装 less和less-loader 依赖: cnpm install less-loader@5.0.0 less@3.11.1 --save-dev...安装 react-app-rewired 和 customize-cra依赖: cnpm install react-app-rewired customize-cra --save-dev 修改 package.json...来替代上一级目录，如果选哟引入的组件的所在位置变的稍微深就更麻烦比如: import "../../../TestComponent"; 因此我们需要加入路径别名的方式优化文件引入方式。...} = require('customize-cra'); const packageName = require('.

7084 0

【原创】不想eject，还咋修改create-react-app的配置？

console.log、debugger；打包结果优化分析；打包增加进度条提示；前方高能预警~ 借助react-app-rewired和customize-cra来完成配置的扩展~ 这里划重点，记住要考呦...~ 我们划分几个步骤，来一一实现：下载安装依赖 yarn add react-app-rewired customize-cra -D 胡哥现在使用的版本是 react-app-rewired@^2.1.8...@7.3.0，如果是最新的版本和上面的react-app-rewired和customize-cra版本配合配置时有问题，所以使用了低版本的。...const { override, addWebpackPlugin } = require('customize-cra'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin...yarn add progress-bar-webpack-plugin -D const { override, addWebpackPlugin } = require('customize-cra

2.9K4 0

React引入antd-mobile+postcss搭建移动端

配置 customize-cra配置api文档 npm install react-app-rewired customize-cra -s package.json进行更改命令方式 "scripts...} = require('customize-cra'); module.exports = override( fixBabelImports('import', { libraryName...: 'antd-mobile', style: 'css', }), ); 在App.js删除之前引入的css 校验是否按需引入 ?...config-overrides.js文件 const { override, fixBabelImports, addPostcssPlugins, addWebpackAlias} = require('customize-cra...需要注意顺序 const { override, fixBabelImports, addPostcssPlugins, addWebpackAlias, addLessLoader } = require('customize-cra

1.3K3 0

【Scratch入门到精通】使用CRA搭建项目

定制CRA配置 react-app-rewired 可以在不 ‘eject’ 也不创建额外 react-scripts 的情况下修改 create-react-app 内置的 webpack 配置，然后你将拥有...2.2.1. react-app-rewired 安装 react-app-rewired $ yarn add -D react-app-rewired customize-cra 2.2.2. config-overrides.js...在根目录中创建一个 config-overrides.js 文件 const { override, addWebpackPlugin, } = require('customize-cra'...addExternalBabelPlugins, addWebpackModuleRule, addLessLoader, fixBabelImports, } = require('customize-cra...构建scratch工程虽然通过npm包形式安装和使用scratch相关工程，但仍需配置webpack进行构建scratch。 3.3.1.

1.5K2 0

Ant Design 按需加载css

实现antd 样式按需引入 npm i react-app-rewired customize-cra 1.然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。...module.exports = function override(config, env) { // do stuff with the webpack config......config-overrides.js文件 const { override, fixBabelImports } = require('customize-cra'); // import 标识按需引入...module.exports = override( fixBabelImports('import', { libraryName: 'antd', // 按需引入的库...less-loader 1.修改 config-overrides.js文件 const { override, fixBabelImports, addLessLoader } = require('customize-cra

8643 0

类型即正义：TypeScript 从入门到实践（序章）

，我们还需要做一点定制化的操作，打开命令行，依次安装如下依赖： $ npm install react-app-rewired customize-cra babel-plugin-import less...，比如 Webpack、Babel 等，因为 CRA 它是一个封闭的黑盒，不允许开发者直接定制，但有时候我们需要对配置做一些修改，比如这里需要配置 antd 的按需引用。...customize-cra：是 CRA 在发布 2.0 之后出来的一个辅助 react-app-rewired 更方便定制 CRA 的 Webpack 配置的一个库，它提供了一些开箱即用的 API。...babel-plugin-import：是配置可供开发者按需引用 antd 组件的一个 Babel 插件 less 和 less-loader：是我们用于定制化 antd 的主题需要的 Webpack...antd 组件库，并使用 react-app-rewired 替换默认的 react-scripts 来完成对 CRA 的 Webpack 配置进行修改，以是我们可以获得 antd 组件的按需引用和主题定制的功能

1.5K2 0

react项目打包优化

yarn add react-app-rewired customize-cra 因为这里讲的是使用 create-react-app 创建的项目，此时我们需要对 create-react-app 的默认配置进行自定义...引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra。...const { override, fixBabelImports } = require('customize-cra'); const addCustom = () => config => {...这也和之前讲到的桌面浏览器前端优化策略中说到的消除阻塞页面渲染的CSS以及Javascript和避免运行耗时的 Javascript中说到的相符合。...对现有项目打包文件进行分析安装 webpack-bundle-analyzer 插件 yarn add -D webpack-bundle-analyzer 使用就直接在 plugin 中添加插件使用即可

3.7K3 0

react 脚手架生成的项目执行什么命令可以展示 webpack 配置?

的配置暴露出来，包括 Webpack 的配置。...使用 react-app-rewired：如果你不想永久地暴露 Webpack 配置，但仍然想对其进行修改，你可以使用 react-app-rewired。...安装 react-app-rewired 和任何你想要使用的自定义配置插件（如 customize-cra）。...修改 package.json 中的脚本命令，使用 react-app-rewired 替换 react-scripts。...请注意，修改 Webpack 配置可能会导致构建和启动过程出现问题，特别是如果你不熟悉 Webpack 的工作原理和配置选项。

2741 0

更骚的create-react-app开发环境配置craco

背景使用 CRA 脚手架创建的项目，如果想要修改编译配置，通常可能会选择 npm run eject 弹出配置后魔改。...如果想要无 eject 重写 CRA 配置，目前成熟的是下面这几种方式通过 CRA 官方支持的 --scripts-version 参数，创建项目时使用自己重写过的 react-scripts 包使用...react-app-rewired + customize-cra 组合覆盖配置使用 craco 覆盖配置第二种方式相对第三种略复杂一些，我自己很有体会并且我们注意到最新的AntDesign4 官方也开始推荐...总结确实能够在不 eject 弹出配置的情况下，能够自定义所有的 cra 构建配置，之前进行了详细的说明，有这方面的需求可以去看看(传送门)。...注意：_configure配置和_craco配置会互斥谨慎使用以下，是我整理完整的 craco.config.js 配置，相应的demo方便参照 craco 还提供一些其他 plugin具体根据实际情况自行加入

8K5 4

写给前端新人：从 0到1 搭建一个前端项目，都需要做什么？

此脚手架有利有弊吧，项目目录结构简洁，不需要太关心 webpack 令人头疼的配置；弊端在于，脚手架确实有些庞大，构建时间在 4mins 左右。各位看官择优选择吧，也可以完全自己搭建一个项目。...customize-cra -D 修改 package.json 中启动项 // package.json "scripts": { "start": "react-app-rewired start...addLessLoader // lessLoader 配置，可更改主题色等 } = require('customize-cra') module.exports = override(/* ......查阅相关资料，需要在 tsconfig.json 中添加一项配置 { ......// "pathRewrite": { // "^/api": "" // } }) ) } 加入 polyfill 和

5.1K5 0

React 组件化开发(一)

css loader 解析css中的路径并将静态资源作为依赖项添加。 style loader 将CSS转换为注入标记的JS模块。...按需加载做按需加载用 eject实在是太不优雅了，优雅实现需要引入以下三个依赖 react-app-rewired：辅助启动 customize-cra：可扩展webpack的配置，类似vue.config.js...babel-plugin-import库 npm install react-app-rewired customize-cra babel-plugin-import -D 在根目录创建 config-overrides.js...const {override,fixBabelImports}=require('customize-cra') module.exports=override( fixBabelImports...，比起继承的方式它更明确和安全。

2.4K2 0

React框架 UI组件库

国内蚂蚁金服) 官网: https://ant.design/index-cn Github: https://github.com/ant-design/ant-design/ 2.1. antd的按需引入...+自定主题安装依赖：yarn add react-app-rewired customize-cra babel-plugin-import less less-loader 修改package.json..."myscripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test...": "react-app-rewired test", "eject": "react-myscripts eject" }, .......根目录下创建config-overrides.js //配置具体的修改规则 const { override, fixBabelImports,addLessLoader} = require('customize-cra

2092 0

TypeScript 、React、 Redux和Ant-Design的最佳实践

后面我会继续写PWA深入和Node.js集群负载均衡Nginx，webpack原理解析等~谢谢思否官方对我上篇文章的加精~ 在使用TypeScript前，请你务必万分投入学习好以下内容再尝试： TypeScript...官方推荐yarn，它会自动添加依赖。...^4.3.2", "@types/redux-thunk": "^2.1.0", "babel-plugin-import": "^1.11.0", "customize-cra...start", "build": "react-app-rewired build", "test": "react-app-rewired test" },...Ant-Design`按需加载配置 `config-overrides.js` const { override, fixBabelImports, addLessLoader } = require('customize-cra

2.9K2 0

React---antd的按需引入和自定义主题

一、antd的按需引入+自定义主题 1.安装依赖：npm install react-app-rewired customize-cra babel-plugin-import..."scripts": { "start": "react-app-rewired start",..."build": "react-app-rewired build", "test": "react-app-rewired test",...3.根目录下创建config-overrides.js 1 const { override, fixBabelImports,addLessLoader} = require('customize-cra..., 12 modifyVars: { '@primary-color': 'green' }, 13 } 14 }), 15 ); 4. antd组件库的使用

2.5K3 1

react Cannot find module node_modules_react-scriptsconfigwebpack.config.dev

原来运行得好好的react项目，突然运行不成功了，提示如下错误 $ npm start > react-app-rewired start internal/modules/cjs/loader.js...ts下的react项目，但是原理相同内容如下 This has been caused by recent changes to CRA (2.1.2) where they merged the webpack.config.dev.js...and webpack.config.prod.js into a single file webpack.config.js....The adjustment to paths made in react-app-rewired in order to continue to be able to be used with CRA...大致意思就是react-app-rewired这个插件升级导致了不会单独生成dev和prod配置文件了，所以导致文件找不到。

1K2 0

从零开始react实战:云书签-1 react环境搭建

首先安装依赖在 2.1.x 版本的 react-app-rewired 需要配合customize-cra来进行配置覆盖。...所以需要安装如下依赖： react-app-rewired ,配置覆盖 customize-cra ,配置覆盖 antd ,ui 库 babel-plugin-import ,按需引入 antd less...,less 支持 less-loader ,less 支持代码如下： npm install --save react-app-rewired customize-cra antd babel-plugin-import..., fixBabelImports, addLessLoader } = require("customize-cra"); module.exports = override( fixBabelImports...这个是和离线使用相关的。

3.5K3 0

使用 craco 对 cra 项目进行构建优化

修改 CRA 项目的配置使用 create-react-app 创建的项目默认是无法修改其内部的 webpack 配置的，不像 vue-cli 那样可以通过一个配置文件修改。...虽然有一个 eject 命令可以是将配置完全暴露出来，但这是一个不可逆的操作，同时也会失去 CRA 带来的便利和后续升级。...如果想要无 eject 重写 CRA 配置，目前成熟的是下面这几种方式通过 CRA 官方支持的 --scripts-version 参数，创建项目时使用自己重写过的 react-scripts 包使用...react-app-rewired + customize-cra 组合覆盖配置使用 craco 覆盖配置这里我选择的是 craco 安装安装依赖 yarn add @craco/craco 修改...目前的 craco 最新版本 v6.4.3 仅支持 cra4 创建的项目构建体积分析首先引入了 webpack-bundle-analyzer 这个插件来分析一下构建产物的组成 /* craco.config.js

1.5K2 0

Ant Design Landing

安装与初始化 create-react-app的安装和初始化： npm init react-app my-app 安装完成后，目录结构: ├── README.md ├── node_modules...customize-cra less less-loader 配置加载less 安装完 less 加载后，我们还需要修改 package.json 里的启动配置。...Home │ └── ... config-overrides.js const { override, fixBabelImports, addLessLoader } = require('customize-cra...fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }), // 添加加载...less 的 javascriptEnabled 和 antd 的主题配置。

1.7K1 1

React项目中使用 CSS Module

安装react-app-rewired 由于新的 react-app-rewired@2.x 版本的关系，还需要安装 customize-cra。...react-app-rewired@2.0.2-next.0 --save-dev //这个版本比较稳定修改package.json /* package.json */ "scripts": { "start": "react-app-rewired...start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom", } 安装...react-app-rewire-less-modules 根目录创建config-overrides.js并编辑以下代码 /*config-overrides.js */ const { injectBabelPlugin } = require('react-app-rewired...config, env); return config; }; css文件后缀需要加上特殊写法 *.module.css *.module.less *.module.scss 作者：Vam的金豆之路

3951 0

React项目中使用 CSS Module

安装react-app-rewired由于新的 react-app-rewired@2.x 版本的关系，还需要安装 customize-cra。...react-app-rewired@2.0.2-next.0 --save-dev //这个版本比较稳定修改package.json/* package.json */“scripts”: {“start”: “react-app-rewired...start”,“build”: “react-app-rewired build”,“test”: “react-app-rewired test --env=jsdom”,}安装css-modules...react-app-rewire-less-modules根目录创建config-overrides.js并编辑以下代码/*config-overrides.js */const { injectBabelPlugin } = require(‘react-app-rewired

3913 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭