create-react-app创建的项目，不想要直接修改node包里的webpack，所以需要扩展webpack配置，在根目录中做修改。
本文讲述的方式是使用 react-app-rewired
1. 安装依赖
$ npm install react-app-rewired customize-cra --save-dev
2. 修改 package.json 的 scripts 配置
/* 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",
"eject": "react-scripts eject"
}
3. 在项目的根目录下创建config-overrides.js文件
+-- your-project
| +-- config-overrides.js
| +-- node_modules
| +-- package.json
| +-- public
| +-- README.md
| +-- src
4. 在config-overrides.js文件中添加配置项
/* config-overrides.js */
const { override,disableEsLint} = require('customize-cra')
//关闭mapSource bug 打包的css有map文件
//const rewiredMap = () => config => {
//config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false;
//return config;
//};
//关闭mapSource css和js都去掉了map文件
process.env.GENERATE_SOURCEMAP = false
module.exports = {
webpack: override(
// 关闭mapSource
//rewiredMap(),
disableEsLint()
),
}
// 关闭mapSource
/* config-overrides.js */
module.exports = function override(config, env) {
//do stuff with the webpack config...
return config;
}
package.json
"scripts": {
"start": "REACT_APP_ENV=test react-app-rewired start",
"build": "REACT_APP_ENV=production react-app-rewired build",
"build:test": "REACT_APP_ENV=test react-app-rewired --max_old_space_size=4096 build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"devDependencies": {
"customize-cra": "^1.0.0",
"react-app-rewired": "^2.1.6",
}
build时间，
"build": "REACT_APP_ENV=production react-app-rewired build",:npm run build:02:12"build": "REACT_APP_ENV=production react-app-rewired --max_old_space_size=4096 build",:npm run build:02:10"build:test": "REACT_APP_ENV=test react-app-rewired --max_old_space_size=4096 build"",:npm run build:test:01:58
文件react-scripts/config/webpack.config.js下的源码：
