npm create react-app myapp
npm install react-app-rewired customize-cra --save-dev
/* package.json */ 原来的： "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" } 修改后的： "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" }
The “injectBabelPlugin” helper has been deprecated as of v2.0
翻译：
自2.0版起，“injectbabelplugin”助手已被弃用
react-app-rewired的新版本删除了injectBabelPlugin，这些方法被移动到一个名为’customize-cra’的新包中
npm uninstall react-app-rewired //删原来的 npm install react-app-rewired@2.0.2 --save-dev //安装指定底版本的
执行 npm start 命令后，项目就可以跑起来了
接下来做一些webpage的配置，比如插件配置，路径别名，ui 插件按需加载，修改、添加loader
直接上完整代码，带注释
const { override, fixBabelImports ,addWebpackExternals ,addWebpackAlias ,addLessLoader } = require(‘customize-cra‘);
const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const myPlugin = [
new UglifyJsPlugin(
{
uglifyOptions: {
warnings: false,
compress: {
drop_debugger: true,
drop_console: true
}
}
}
)
]
module.exports = override(
fixBabelImports(‘import‘, { //配置按需加载
libraryName: ‘antd‘,
libraryDirectory: ‘es‘,
style: true,
}),
addWebpackExternals({ //不做打包处理配置，如直接以cdn引入的
echarts: "window.echarts",
// highcharts:"window.highcharts"
}),
addWebpackAlias({ //路径别名
‘@‘: path.resolve(__dirname, ‘src‘),
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: {
‘@primary-color‘: ‘#1DA57A‘
}
}),
(config)=>{ //暴露webpack的配置 config ,evn
// 去掉打包生产map 文件
// config.devtool = config.mode === ‘development‘ ? ‘cheap-module-source-map‘ : false;
if(process.env.NODE_ENV==="production") config.devtool=false;
if(process.env.NODE_ENV!=="development") config.plugins = [...config.plugins,...myPlugin]
//1.修改、添加loader 配置 :
// 所有的loaders规则是在config.module.rules(数组)的第二项
// 即：config.module.rules[2].oneof (如果不是，具体可以打印 一下是第几项目)
// 修改 sass 配置 ，规则 loader 在第五项(具体看配置)
const loaders = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
loaders[5].use.push({
loader: ‘sass-resources-loader‘,
options: {
resources: path.resolve(__dirname, ‘src/asset/base.scss‘)//全局引入公共的scss 文件
}
})
return config
}
);
使用react-app-rewired和customize-cra对默认webpack自定义配置
原文：https://www.cnblogs.com/beyonds/p/11441914.html