在CRA中自定义webpack

Dear 丶 2022-09-08 12:59 210阅读 0赞

> 在create-react-app中想要自定义修改webpack有两种方式:eject和不使用eject的其他方式。

# 使用eject #

eject 命令执行后会将封装在 create-react-app 中的配置全部反编译到当前项目，这样用户就能完全取得 webpack 文件的控制权。

npm run eject 会复制所有依赖文件和相应的依赖（webpack、babel等）到你的项目。是单向操作，eject后就回不去了。

使用方法：在新建的cra应用中直接npm run eject。

tips：我在第一次这样做的时候遇到了下面这个问题

`create-react-app eject暴露配置时出现“Remove untracked files, stash or commit any changes, and try again.”错误`

**问题产生原因**：

脚手架创建项目产生gitignore，本地无文件仓库

**解决方案如下**

`git add .`

`git commit -am "Save before ejecting"`

**问题解决**

再次运行`npm run eject`现在就可以看到隐藏的配置文件了

--------------------

## 不使用eject ##

customize-cra配置

customize-cra利用react-app-rewired的config-overrides.js文件。通过导入customize-cra功能和出口几个函数调用包在我们的override功能，

可以很容易地修改底层配置对象（webpack，webpack-dev-server，babel等）组成create-react-app。

https://github.com/arackaf/customize-cra\#using-the-plugins

###### 使用方法： ######

1、安装

yarn add react-app-rewired customize-cra -D

2、修改package.json

"scripts": { 
    
        "start": "react-app-rewired start",
    
        "build": "react-app-rewired build",
    
        "test": "react-app-rewired test --env=jsdom",
    
        "eject": "react-scripts eject"
    
      },

3、在根目录新建config-overrides.js

const {  override } = require('customize-cra');
    module.exports = { };

4、进行配置

//配置less
    module.exports = override(    
        addLessLoader({         
            javascriptEnabled: true,        
            modifyVars: {  
                '@primary-color': '#1DA57A' 
            }    
        })
    );

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack基础自定义规则配置

为了防止全局安装出现的版本冲突，我们一般把webpack安装在本地项目中 $ yarn add webpack webpack-cli -D $ npm webpack

傷城~/ 2023年07月08日 07:59/ 0 赞/ 15 阅读

相关 webpack开发自定义功能插件

webpack 插件开发简介使用webpack开发一些自定义功能的插件，最主要的目的是了解webpack工作流的方式，更深层次的认识和了解webpack工作原理

电玩女神/ 2023年05月28日 03:51/ 0 赞/ 37 阅读

相关 webpack配置自定义loader

webpack配置自定义loader: 方法一：设置自定义loader模块引入路径，引入`my-loader`时去对应路径获取loader // we

朱雀/ 2023年01月16日 06:56/ 0 赞/ 172 阅读

相关在helm中自定义chart

使用helm create hbkchart，命令执行后会在当前目录生成hbkchart目录。我们进入hbkchart，可以看到helm为我们生成了常用的模板

爱被打了一巴掌/ 2022年12月23日 13:26/ 0 赞/ 226 阅读

相关使用 customize-cra 修改 webpack 配置

使用 customize-cra 修改 webpack 配置一、为什么使用 customize-cra 二、customize-

谁借莪１个温暖的怀抱￠/ 2022年12月22日 13:27/ 0 赞/ 587 阅读

相关在Vue中自定义指令

Vue中指令在定义的时候，名称前面不需要加 v- 前缀，在调用的时候，需要在指令名称前加上 v- 前缀来进行调用。自定义指令的注册分为全局自定义指令和局部指令。全局

偏执的太偏执、/ 2022年09月08日 15:44/ 0 赞/ 231 阅读

相关在CRA中自定义webpack

> 在create-react-app中想要自定义修改webpack有两种方式:eject和不使用eject的其他方式。使用eject eject 命令执行后会将封装

Dear 丶/ 2022年09月08日 12:59/ 0 赞/ 211 阅读

相关在 Spring 中自定义 scope

大家对于 Spring 的 scope 应该都不会默认。所谓 scope，字面理解就是“作用域”、“范围”，如果一个 bean 的 scope 配置为 singleton，则从

Dear 丶/ 2022年04月23日 11:32/ 0 赞/ 237 阅读

相关 webpack4 自定义插件plugins

插件即是一个class类,wb会调用其中的apply方法涉及到的内容:compiler、tapable和compilation 配置:

我不是女神ヾ/ 2021年07月24日 22:45/ 0 赞/ 668 阅读

相关 webpack4 自定义loader

loader:(文档:https://webpack.docschina.org/api/loaders/) (1)解析从前往后,但调用为从后到前(loade

短命女/ 2021年07月24日 19:18/ 0 赞/ 494 阅读