React 不用eject下修改webpack配置实现alisa

使用 customize-cra 和 react-app-rewired 对React项目进行webpack配置的注入

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

在项目根目录创建config-overrides.js和aliasPaths.json文件：

#config-overrides.js
const {override,addWebpackAlias,fixBabelImports,
} = require("customize-cra");
const path = require("path");module.exports = override(// antd按需加载fixBabelImports("import", {libraryName: "antd",libraryDirectory: "es",style: true,}),//路径别名配置addWebpackAlias({["@components"]: path.resolve(__dirname, "src/components"),["@config"]: path.resolve(__dirname, "src/config"),["@store"]: path.resolve(__dirname, "src/store"),["@utils"]: path.resolve(__dirname, "src/utils"),["@service"]: path.resolve(__dirname, "src/service"),["@api"]: path.resolve(__dirname, "src/api"),["@lib"]: path.resolve(__dirname, "src/lib"),["@pages"]: path.resolve(__dirname, "src/pages"),})
);

#aliasPaths.json
{"compilerOptions": {"baseUrl": ".","paths": {"*": ["types/*"],"@components/*": ["src/components/*"],"@config/*": ["src/config/*"],"@store": ["src/store"],"@utils/*": ["src/utils/*"],"@service/*": ["src/service/*"],"@api/*": ["src/api/*"],"@lib": ["src/lib"],"@pages/*": ["src/pages/*"],}}
}

修改tsconfig.json或jsconfig.json

{...,"extends": "./aliasPaths.json",
}

修改package.json

//GENERATE_SOURCEMAP=false 配置在unix或linux环境中可以明显加快打包速度
{"scripts": {"start": "react-app-rewired start","build": "GENERATE_SOURCEMAP=false react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject"},
}

React 不用eject下修改webpack配置实现alisa相关推荐

不暴露 create react app 的webpack配置下，修改webpack配置
使用 react-app-rewired react-app-rewired 传送门安装 react-app-rewired npm install react-app-rewired --save ...
修改webpack配置，在react中使用less
LESS是一个CSS预处理器,比如antD就是基于LESS的. 要在react中使用LESS,需要暴露webpack配置并进行修改,同时安装less和less-loader. 当然网上可以找到很多教程 ...
react修改webpack配置，添加别名
第一种方式通过 npm run eject 直接暴露出来react所有的webpack配置文件,暴露出来之后,过程不可逆而且失去了 react-scripts 的统一管理的好处,而且react的w ...
webpack多个Html,少量修改webpack配置支持打包多页面
webpack一般是配合单页面应用使用,但并不是所有的web应用都是单页的,有多个页面的情况还是很多的,当然你可以用其它的构建工具来打包,但对于习惯了webpack的你来说,要是能直接在webpack ...
react学习系列1 修改create-react-app配置支持stylus
注:由于前端更新非常快,写这篇文章时 create-react-app 使用的版本是1.4.1 最新的使用流程请参照官方文档. create-react-app 是facebook推出的快速创建rea ...
react学习系列1 修改create-react-app配置支持stylus 1
注:由于前端更新非常快,写这篇文章时 create-react-app 使用的版本是1.4.1 最新的使用流程请参照官方文档. create-react-app 是facebook推出的快速创建rea ...
centos7 下修改网络配置
centos7配置IP地址有关于centos7获取IP地址的方法主要有两种,1:动态获取ip:2:设置静态IP地址在配置网络之前我们先要知道centos的网卡名称是什么,centos7不再使用if ...
随记：Linux下修改网络配置
一.centos下网络的配置文件/etc/sysconfig/network-scripts/ #DEVICE="eth0" #BOOTPROTO="dhcp" ...
Win10中Docker下修改mysql配置(主要修改utf-8字符集)
由于要修改MySQL的配置文件,在命令行修改每次重启都会失效,所以想修改Docker下的mysql配置文件,这样将其再作为一个镜像保存,以后就可以一劳永逸了. 在Win10的Docker容器中进行vi ...

React 不用eject下修改webpack配置实现alisa

在项目根目录创建config-overrides.js和aliasPaths.json文件：

修改tsconfig.json或jsconfig.json

修改package.json

React 不用eject下修改webpack配置实现alisa相关推荐

最新文章

热门文章