通过CRA脚手架构建的项目，一般webpack配置是隐藏的，如果要修改，就要另外处理。
想要修改webpack通常有两种方式
通过插件去增加或覆盖webpack配置（方法一、方法二）
或者释放项目中的webpack配置，使之可见，然后可以修改（方法三）
本来CRA脚手架将webpack等复杂的配置封装在项目中，后续可以通过更新react-scripts来体验版本升级带来的新特性，但有些时候确实需要我们修改webpack配置，适应项目的需要，所以我们一般选择通过插件覆盖webpack配置，当然也可以完全放开配置。
以下几种常见的方式有：
react-app-rewired修改或覆盖配置（推荐）yarn add react-app-rewired customize-cra babel-plugin-import -D 复制代码
package.json{ "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" } } 复制代码config-overrides.jsconst { override, fixBabelImports, addLessLoader } = require("customize-cra"); module.exports = override( fixBabelImports("import", { libraryName: 'antd', libraryDirectory: "es", style: true }), addLessLoader({ javascriptEnabled: true }) ); 复制代码这里配置webpack支持less语法，可以看到这里与通常配置的webpack不太一样，详细配置可以看react-app-rewired官方文档
App.css和index.css修改为App.less和index.less
然后在项目中引入，发现项目运行正常
@craco/craco修改或覆盖配置yarn add @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import -D 复制代码
craco.config.jsconst CracoLessPlugin = require("craco-less") const path = require('path') const pathResolve = pathUrl => path.join(__dirname, pathUrl) module.exports = { webpack: { alias: { '@': pathResolve('src') } }, babel: { plugins: [ ['@babel/plugin-proposal-decorators', { legacy: true }] ] }, plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: {}, javascriptEnabled: true } } } } ] } 复制代码这里配置引入的别名 '@'，具体使用
在src下新建目录pages/index.js
export const DATA = "test" 复制代码
这里同时展示下引入插件的方法@babel/plugin-proposal-decorators
下载好的项目，在package.json中可以看到这样的脚本
{ "scripts": { "eject": "react-scripts eject" } } 复制代码执行yarn eject, 将封装的webpack配置编译到项目中，这样可以获取webpack的全部配置，自行修改。
cd fronted-demo yarn eject 复制代码
可以看到fronted-demo项目目录下新增了很多的文件，这些文件都是webpack的配置，可以修改任意的配置，但也导致项目文件骤增，并且该过程不可逆。
主要的配置放在config文件中
这就和webpack原始的配置一样了，
less-loader这里配置引入less-loader
在config/webpack.config.js下module/rules下添加该配置，然后在项目中添加common.less文件
.color-red { color: red } 复制代码在index.tsx文件中
import "./common.less" <div className="color-red">test</div> 复制代码
运行后发现
1、less-loader 版本不能超过6.0.0，超过了写法不一样，会报错，这是因为高版本的less-loader语法变了，需要写新的格式。
TypeError: this.getOptions is not a function
2、注意这两行配置，less-loader要写在file-loader前才能生效
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/127957.html
摘要：有没有办法实现就局部刷新呢当然是有第十步执行为了实现局部热加载，我们需要添加插件。 前言 用了3个多月的vue自认为已经是一名合格的vue框架api搬运工，对于vue的api使用到达了一定瓶颈，无奈水平有限，每每深入底层观赏源码时候都迷失了自己。 遂决定再找个框架学习学习看看能否突破思维局限，加上本人早已对React、RN技术垂涎已久,于是决定找找教程来学习。无奈第一步就卡在了环境搭...
摘要：相关配置请参考中文文档。关于的更多使用方法及理解需要详细具体讲解，涉及篇幅较大，本文暂不涉及，有兴趣可以看文档中文文档，我会整理后再单独章节分享接下来我们将编写路由组件这与有一些差别，原来的方法已经不再使用，在中或组件从中引入。 相信很多刚入坑React的小伙伴们有一个同样的疑惑，由于React相关库不断的再进行版本迭代，网上很多以前的技术分享变得不再适用。比如react-...
摘要：在上一篇文章记一次基于的项目由开发到部署一中，我们了解到了给我们提供了哪些支持，也了解到了有哪些不足。项目回顾这是一个移动端的应用，使用，，，，基于开发。可以添加到主屏幕，可以断网条件下正常打开和访问数据。 在上一篇文章记一次基于react、cra2、typescript的pwa项目由开发到部署（一）中，我们了解到了create-react-app 给我们提供了哪些pwa支持，也了解到...
摘要：官方文档中文文档基本使用注意一定要在根目录的中声明，要不然点击任何链接都无法跳转。官方文档中文文档简单的来说，每一次的修改状态都需要触发，然而其实项目中我现在还没用到修改数据。。。 学习 React 的过程中实现了一个个人主页，没有复杂的实现和操作，适合入门 ~ 原文地址：https://github.com/axuebin/react-blog/issues/17 这个项目其实功能...
摘要：表示生成一个懒加载的，只有当需要时才会被加载。主要是作用域提升，将所有模块放在同一个作用域当中，一方面能提高运行速度，另一方面也能降低文件体积。前提是你的代码是用模块写的。参考文章学习小结 前言 之前接手公司一个前端项目，开发了几个月后越来越难以忍受项目结构的混乱和打包体积的臃肿（脚手架和基本功能代码都是从公司的其他项目复制过来的），如果不立即进行重构，难以想象以后要怎么维护各个产品线...
阅读 130091·2024-02-01 10:43
阅读 758·2024-01-31 14:58
阅读 733·2024-01-31 14:54
阅读 82539·2024-01-29 17:11
阅读 2821·2024-01-25 14:55
阅读 1896·2023-06-02 13:36
阅读 2771·2023-05-23 10:26
阅读 835·2023-05-23 10:25
