直入主题
Overview
customize-cra takes advantage of react-app-rewired's config-overrides.js file. By importing customize-cra functions and exporting a few function calls wrapped in our override function, you can easily modify the underlying config objects (webpack, webpack-dev-server, babel, etc.) that make up create-react-app.
翻译：customize-cra利用react-app-rewired的config-overrides.js文件。通过导入customize-cra函数并导出覆盖函数中包含的几个函数调用，您可以轻松修改组成create-react-app的底层配置对象（webpack、webpack-dev-server、babel等）。
说人话
上面都是抄的，说人话就是config-overrides.js文件能在不暴露webpack文件时修改打包的配置对象，搞起来。
感觉自己行了的，可以直接去看api文档，照猫画虎。
下面是我的配置代码
// config-overrides.js
/* eslint-disable no-useless-computed-key */
const {
override,
addWebpackAlias,
addWebpackResolve,
fixBabelImports,
addLessLoader,
adjustStyleLoaders,
addWebpackPlugin,
addWebpackModuleRule,
} = require('customize-cra');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // 代码压缩
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); // 大文件定位
const ProgressBarPlugin = require('progress-bar-webpack-plugin'); // 打包进度
const CompressionPlugin = require('compression-webpack-plugin'); // gzip压缩
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // css压缩
const path = require('path');
module.exports = override(
// 导入文件的时候可以不用添加文件的后缀名
addWebpackResolve({
extensions: ['.tsx', '.ts', '.js', '.jsx', '.json'],
}),
// 路径别名
addWebpackAlias({
['@']: path.resolve(__dirname, 'src'),
}),
// less预加载器配置
addLessLoader({
strictMath: true,
noIeCompat: true,
modifyVars: {
'@primary-color': '#1DA57A', // for example, you use Ant Design to change theme color.
},
cssLoaderOptions: {}, // .less file used css-loader option, not all CSS file.
cssModules: {
localIdentName: '[path][name]__[local]--[hash:base64:5]', // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.
},
}),
// 注意是production环境启动该plugin
process.env.NODE_ENV === 'production' &&
addWebpackPlugin(
new UglifyJsPlugin({
// 开启打包缓存
cache: true,
// 开启多线程打包
parallel: true,
uglifyOptions: {
// 删除警告
warnings: false,
// 压缩
compress: {
// 移除console
drop_console: true,
// 移除debugger
drop_debugger: true,
},
},
})
),
addWebpackPlugin(new MiniCssExtractPlugin()),
// 判断环境变量ANALYZER参数的值
process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin()),
// 打包进度条
addWebpackPlugin(new ProgressBarPlugin()),
// 需要nginx配合
// addWebpackPlugin(
// new CompressionPlugin({
// filename: '[path][base].gz',
// algorithm: 'gzip',
// test: /\.js$|\.html$|\.css/,
// threshold: 10240, // 只有大小大于该值的资源会被处理 10240字节
// minRatio: 1, // 只有压缩率小于这个值的资源才会被处理
// deleteOriginalAssets: false, // 删除原文件
// })
// )
addWebpackModuleRule({
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 64,
name: 'static/media/[name].[hash:8].[ext]',
},
})
addWebpackModuleRule({
test: [/\.css$/, /\.less$/], // 可以打包后缀为sass/scss/css的文件
use: ['style-loader', 'css-loader', 'less-loader'],
})
);
说几个常用的配置
- addWebpackAlias 相当于 webpack的Plugin
- addWebpackModuleRule 相当于webpack里Module的rules
- addWebpackAlias 相当于 webpack里resolve的alias，添加路径别名
- addWebpackExternals 相当于 webpack里Externals，添加外部扩展CDN
其他的大火自己去看，简单的一些配置=》好使
最后加点水，我的爬坑之路，我是怎么一步步被迫学习这些配置的，看看你们有没有遇到过相同的报错
爬坑之路
我写的烂代码出了一个bug，我删除node_modules重新下载希望能解决bug①，但是失败了结果又产生了build失败(报错①如下图)的新bug②（强行混工时）！看了很多百度上cv的水文没解决，最后自己从webpack到customize-cra再到config-overrides.js配置，最终花了大半天解决了。所以记录下自己的解决过程看看能不能帮到大火。
查了下要配置webpack.config.js，但我项目里没有配置webpack的config文件夹。
有人会问为啥不“npm run eject”暴露出来，答案就是我不想呀，多那么多文件看起来头疼。create-react-app创建react项目的时候包含的customize-cra插件里提供的config-overrides.js文件能帮我们覆盖webpack里的一些配置，完全够用了。
我按着customize-cra的api说明，加了条 addWebpackPlugin(new MiniCssExtractPlugin())
原先的报错是没了，出来个新的错误②：TypeError: value.split is not a function
看不懂了，这提示的好简单呀，但是我看里头有css字样，应该是样式打包的问题，我就加了点rule
addWebpackModuleRule({
test: [/\.css$/], // 可以打包后缀为sass/scss/css的文件
use: ['style-loader', 'css-loader'],
})
还有错，百度后感觉少了个less，就再加了点
addWebpackModuleRule({
test: [/\.css$/, /\.less$/], // 可以打包后缀为sass/scss/css的文件
use: ['style-loader', 'css-loader'],
})
错误变了：CssSyntax error: Unknown word (14:3)
我一想是不是确实less的加载器，又改了下
addWebpackModuleRule({
test: [/\.css$/, /\.less$/], // 可以打包后缀为sass/scss/css的文件
use: ['style-loader', 'css-loader', 'less-loader'],
})
这回成了！！菜菜的我在疯狂尝试中解决了这个bug
文档看着就是香，比花时间一个个点百度上那些水文肯定有效率！当然前提是你问题定位是对的，不然还是得挨个试错
