React脚手架 扩展webpack配置

使用 react-app-rewired 扩展Webpack配置

在不用使用react脚手架提供的 eject 命令打开webpack配置文件的情况下，扩展webpack

我们需要使用，两个插件 react-app-rewired babel-plugin-import

安装：

npm install react-app-rewired babel-plugin-import --save

[email protected]：是用来帮助我们扩展webpack
babel-plugin-import ：一个babel的管理加载的插件

以按需导入antd为例：

1.先在在项目根目录创建一个 config-overrides.js 的文件用于修改默认配置 。注意文件名是固定的

2.修改配置项

/* config-overrides.js */
/*这里使用的语法是node模块导入规范(CommonJS)*/

/*
导入injectBabelPlugin 需要接受两个参数，会返回一个全新的config对象
injectBabelPlugin(参数1 = [自己配置的模块] , config='webpack默认的配置')
*/

/*
导出一个函数，这个函数接受两个参数 
config = 要修改的config对象
env
*/

/* 
下面的import是babel-plugin-import这个插件
libraryName：需要配置的库的名字 ,会在项目根目录node_modules寻找。
libraryDirectory: 导出库中的指定的目录文件。 
style: 这里指的是antd的css文件一并导出
*/

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
	config = injectBabelPlugin（[        
		'import' , {libraryName: 'antd'， libraryDirectory: 'es', style: 'css'}
	], config）
	
	return config
}

3.修改package.json 里的启动配置

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

使用：

/*
例如: 引入antd的一个Button组件
*/

没配置之前：
import Button from 'antd/lib/button'
import 'antd/dist/antd.css'

配置之后： babel-plugin-import 会帮助加载 JS 和 CSS
import { Button } from 'antd'

---

添加ES7装饰器语法。需要额外安装babel另外的插件 以支持解析装饰器语法

npm install --save--dev babel-plugin-transform-decorators-legacy

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
//antd按需加载
	config = injectBabelPlugin([        
		'import' , {libraryName: 'antd'， libraryDirectory: 'es', style: 'css'}
	], config
	);

//添加装饰器能力
	config = injectBabelPlugin(
		['@bable/plugin-proposal-decorators', {"legacy": true}],
		config
	);
	return config;
}