关于最新create-react-app使用react-app-rewired2.x添加webpack配置

使用过create-react-app(以下简称cra)的朋友都知道,这是react官方的一款脚手架工具,内部集成了babel,webpack,webpack-dev-server等等。

以前我们要在cra中做webpack的配置,有三种方式:

1、运行npm run eject得到原始的webpack配置文件config,然后可以看到里面有prod和dev两个环境的相关配置;但是新版本cra你run eject之后,只有一个webpack.config.js文件了。

可以在这里面进行配置。但是本文中这不是我们推荐的方式。

2、不run eject。而是改写script文件中的js。这个本人没有操作过,这个就不详谈了。

3、使用react-app-rewired,安装这个工具后,在项目根目录中新建文件config-overrides.js文件。此时我们便可以在其中进行各种webpack的骚操作了~

但是!react-app-rewired2.x以后,不再支持injectBabelPlugin的方式,需要安装customize-cra。

具体的,ant design官方文档已经给出了最新的解决方案。请前往详览。https://ant.design/docs/react/use-with-create-react-app-cn

这种方式就是我们推荐的方式。因为无需生成更多额外的文件,同时配置又趋于更简单可控的方式。

接下来我们就来具体说一下操作步骤。

首先,我们安装react-app-rewired。

$ yarn add react-app-rewired

然后修改package.json文件如下,

复制代码

```

/* package.json */

"scripts": {

  • "start": "react-scripts start",
  • "start": "react-app-rewired start",
  • "build": "react-scripts build",
  • "build": "react-app-rewired build",
  • "test": "react-scripts test",
  • "test": "react-app-rewired test",

}

```

复制代码

接着,安装customize-cra

```$ yarn add customize-cra```

然后在根目录下添加config-overrides.js文件。

```module.exports = function override(config, env) {

// 关于webpack的相关配置

return config;

};```

好了,基本的操作就是这样。下面我们再来说具体到我们的项目中,需要做的一些配置。

1、react项目中我们最常用的组件库antd,我们需要配置按需加载。

使用babel-plugin-import,它是一个用于按需加载组件代码和样式的 babel 插件。

安装

```$ yarn add babel-plugin-import```

接着配置webpack

复制代码

```/* config-overrides.js */

  • const { override, fixBabelImports } = require('customize-cra');
  • module.exports = function override(config, env) {

  • return config;

  • };

  • module.exports = override(

  • fixBabelImports('import', {

  • libraryName: 'antd',

  • libraryDirectory: 'es',

  • style: 'css',

  • }),

  • );```

复制代码

这样我们在组件中就可以按需引入组件库中所需要的组件了。

2、自定义主题

按照配置主题的要求,自定义主题需要用到 less 变量覆盖功能。

安装less和less-loader

```$ yarn add less less-loader```

配置webpack

复制代码

```/* config-overrides.js */

  • const { override, fixBabelImports } = require('customize-cra');
  • const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(

fixBabelImports('import', {

libraryName: 'antd',

libraryDirectory: 'es',

  • style: 'css',
  • style: true,

}),

  • addLessLoader({

  • javascriptEnabled: true,

  • modifyVars: { '@primary-color': '#1DA57A' },

  • }),

);```

复制代码

这里利用了less-loader的modifyVars来进行主题配置。当然这里的modifyVars的值也可以是一个theme文件。

3、打包后我们会发现静态文件夹中会有很多的css和js的map文件,那么我们该怎么关闭sourcemap呢?

复制代码

```/* config-overrides.js */

const { override, fixBabelImports, addLessLoader } = require("customize-cra");

  • process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(

fixBabelImports("import", {

libraryName: 'antd',

libraryDirectory: "es",

style: true,

}),

addLessLoader({

javascriptEnabled: true,

modifyVars: { '@primary-color': '#1DA57A' },

})

);```

复制代码

ok,再次执行```npm run build```便不会产生map文件了。

还看到一种解决的方式如下,

复制代码

```const rewiredMap = () => config => {

config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false;

return config;

};

module.exports = override(

// 关闭mapSource

rewiredMap()

);```

复制代码

参考地址:https://segmentfault.com/q/1010000018123194

4、支持装饰器

```const { override, addDecoratorsLegacy } = require("customize-cra");

module.exports = override(

addDecoratorsLegacy()

);```

5、最后我们来说说前端本地proxy的配置

开发中常见的问题就是跨域。那么我们前端惯用的方式就是给本地webpack启动的node服务设置代理。

那么具体到使用了新版的cra后,我们该怎么办呢?

很简单,在src目录下新建文件setupProxy.js(注意文件名一定要是这个名字,不要问什么,cra现在废弃了proxy对象配置的方式,将其作为单独模块。解析就是按 src/setupProxy.js这个路径)

安装http代理相关包http-proxy-middleware

```$ yarn add http-proxy-middleware -D```

配置如下,

复制代码

```const proxy = require('http-proxy-middleware')

module.exports = function(app) {

app.use(

proxy('/api', {

target: 'http://xx.xx.xx.xx:8000/',

changeOrigin: true,

pathRewrite: {

'^/api': ''

}

})

)

}```

复制代码

好了,现在你就可以愉快的访问接口了~

关于更多的customize-cra配置,大家可以自行查看文档。https://github.com/arackaf/customize-cra

转载至:https://www.cnblogs.com/zyl-Tara/p/10635033.html
最后编辑于:2024-10-27 15:39:36
© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
吴冰_hogan几秒前
nacos集群源码解析-cp架构
java·spring boot·spring·架构·服务发现·springcloud
阿七想学习1 分钟前
数据结构《链表》
java·开发语言·数据结构·学习·链表
Yaml42 分钟前
Java的六大排序
java·算法·排序算法
极客代码3 分钟前
【Python TensorFlow】进阶指南(续篇二)
开发语言·人工智能·python·深度学习·tensorflow
XiaoLiuLB4 分钟前
Tomcat NIO 配置实操指南
java·tomcat·nio
Be_Somebody8 分钟前
[这可能是最好的Spring教程!]Maven的模块管理——如何拆分大项目并且用parent继承保证代码的简介性
java·spring boot·spring·spring入门
计算机学姐17 分钟前
基于Python的高校成绩分析管理系统
开发语言·vue.js·后端·python·mysql·pycharm·django
VertexGeek18 分钟前
Rust学习(三):rust基础Ⅱ
开发语言·学习·rust
一个数据小开发24 分钟前
业务开发问题之ConcurrentHashMap
java·开发语言·高并发·map
会飞的架狗师40 分钟前
【Spring】Spring框架中有有哪些常见的设计模式
java·spring·设计模式