扩展create-react-app的webpack配置
杜俊爽
在创建react项目时，我们一般用create-react-app脚手架来搭建项目。
create-react-app对webpack的配置进行了封装并默认隐藏了配置文件。
当我们需要对webpack的配置进行扩展时，需要执行npm run eject命名将配置文件暴露出来，然后在对配置文件进行扩展。
这种方式的缺点：
npm run eject命名不可逆，一旦配置文件暴露后就不可再隐藏- 扩展的配置和create-react-app内建的webpack配置混合在了一起，不利于配置出现问题后的排查。
使用react-app-rewired再配置
react-app-rewired是对create-react-app 进行自定义配置的社区解决方案。它不会直接去修改create-react-app的默认配置，而是在create-react-app配置的基础上进行扩展。
使用步骤
1.安装react-app-rewired
npm install react-app-rewired@2.0.2-next.0 --save-dev
2.在项目根目录中创建config-overrides.js文件用于修改默认配置
/* config-overrides.js */
module.exports = function override(config, env) {
//do stuff with the webpack config...
return config;
}
3.修改 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",
}
配置文件config-overrides.js
通过上面3步已经可以扩展webpack配置了，接下来就根据需求去配置即可。下面介绍我使用过的一些常见配置
- 启用ES7的修改器语法（babel 7）
- css模块化（安装和使用见参考链接）
- 配置别名
- antd按需加载
- less模块化和覆盖变量
yarn add @babel/plugin-proposal-decorators //修饰器
yarn add codebandits/react-app-rewire-css-modules sass-loader node-sass //css、sass模块化
yarn add babel-plugin-import //antd按需加载
yarn add react-app-rewire-less-modules //less模块化
const { injectBabelPlugin } = require('react-app-rewired');
const rewireCssModules = require('react-app-rewire-css-modules');
const rewireLess = require('react-app-rewire-less-modules')
const path = require('path')
function resolve (dir) {
return path.join(__dirname, '.', dir)
}
module.exports = function override(config, env) {
// do stuff with the webpack config...
//启用ES7的修改器语法（babel 7）
config = injectBabelPlugin(['@babel/plugin-proposal-decorators', { "legacy": true }], config) //{ "legacy": true }一定不能掉，否则报错
//css模块化
config = rewireCssModules(config, env);
//配置别名
config.resolve.alias = {
'@': resolve('src')
}
//antd按需加载
config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], config,);
//less模块化
config = rewireLess.withLoaderOptions({
javascriptEnabled: true,
modifyVars: {'@primary-color': '#1DA57A'},
})(config, env)
return config;
};
2018.12.24更新
今天看create-react-app文档时，发现脚手架已经支持css模块化，并不需要在额外的配置了，css模块化使用方法都是一致的（此功能适用于 react-scripts@2.0.0 及更高版本，注意只支持css，类似于less、stylus的模块化还是需要配置）。
2019.1.21更新
今天再来配置时发现报错了，原因是新的react-app-rewired@2.x版本的关系。react-app-rewired删除所有方法的injectBabelPlugin，这些方法被移动到一个名为customize-cra的新包中。解决办法是把react-app-rewired 进行降级或者按文档重新配置，可以参考这里。
参考链接：
类似资料：