create-react-app扩展webpack配置

发布时间:2021-01-04 21:35:14阅读:(1678)

会React的人对create-react-app(下文简称CRA)这个脚手架一定不会陌生,这是react官方推出的一个脚手架。虽然在使用上很方便,但它的webpack配置却是固定的,并没有提供修改的入口,这点正是让人又爱又恨。虽然官方提供了eject这个命令可以弹出所有配置文件,但当你使用了这个命令后,后续如果想升级脚手架,又是一个头痛的问题。本文将介绍如何在不执行eject命令的前提下,拓展CRA的webpack配置。

一、官方支持的配置拓展点

a. CRA支持普通的css文件,同时也支持css module,只需要将css的后缀名命名为*.module.css,就能开启css module功能

b. CRA支持sass/scss语法,但默认没有引入sass组件,只需要安装node-sass这个包即可使用sass/scss功能(当然,也支持css module功能,只需要文件后缀名为*.module.scss/*.module.sass即可)

c. 调整eslint配置,CRA项目的package.json中会出现一个eslintConfig节点,这个节点就是react官方给我们提供的eslint配置修改的入口,其语法与.eslintrc文件是一致的

d. proxy,CRA内置了proxy功能,只需在package.json中添加"proxy":"http://xxx.xx.xx" 即可开启proxy功能

e. 修改项目启动端口,需要在更目录下新建一个.env文件,在.env文件中添加:PORT=3200 即可修改项目默认启动端口

f. 其他一些可修改的配置项,详见https://create-react-app.dev/docs/advanced-configuration

二、拓展webpack配置(通过react-app-rewired和customize-cra)

react-app-rewired是社区提供的一个修改CRA配置文件的组件,配合customize-cra,能便捷的修改CRA的配置文件,github地址:

react-app-rewired: https://github.com/timarney/react-app-rewired

customize-cra: https://github.com/arackaf/customize-cra

安装

yarn add react-app-rewired customize-cra

配置

1、在项目根目录添加config-overrides.js配置文件

/* config-overrides.js */

module.exports = function override(config, env) {
//do stuff with the webpack config...
return config;
}

2、修改项目启动命令

/* package.json */

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

这样最基础的配置就完成了,后续就能在config-overrides.js中修改webpack的配置了,例如:

/* config-overrides.js */

const {
override,
addDecoratorsLegacy,
disableEsLint,
addWebpackAlias,
addLessLoader,
addWebpackPlugin
} = require("customize-cra");
const path = require("path");

module.exports = override(
// 启用装饰器模式
addDecoratorsLegacy(),

// 禁用eslint
disableEsLint(),

// 配置alias
addWebpackAlias({
["@/components"]: path.resolve(__dirname, "src/components")
}),

// 添加less解析器
ddLessLoader({
modifyVars: themeVariables,
javascriptEnabled: true,
sourceMap: false,
}),

// 添加其他插件等
addWebpackPlugin(xxx)

);

如果需要修改devServer的配置,可以将配置文件改写成这样:

/* config-overrides.js */

module.exports = {
webpack: override(config, env){
//do stuff with the webpack config...
return config;
},
devServer: function(configFunction){
return function(proxy, allowedHost){
const config = configFunction(proxy, allowedHost);
// add customer config here
return config;
}
},
paths: function(paths, env) {
// add customer config here

return paths;
}
}

三、拓展webpack配置(通过craco)

craco是另一款类似react-app-rewired的功能,其使用配置也很简单

github:https://github.com/gsoft-inc/craco

安装

yarn add @craco/craco

配置

1、在项目根目录下添加craco.config.js配置文件

/* craco.config.js */

module.exports = {
style: {
//修改样式配置
},
eslint: {
// 修改eslint配置,同.eslintrc
},
babel: {
//babel配置,同.babelrc
},
plugins: [
//注入插件
],
webpack: {
configure: (config, { env, paths }) => {
//修改webpack配置
return config;
}
},
devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
// 修改devServer配置
return devServerConfig;
}
}

2、修改项目启动命令

/* package.json */

"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}

这样就配置完成了。

其他详细的配置可见:https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#configuration

标签:ReactCRA

发表评论

评论列表(有0条评论1678人围观)
暂无评论