介绍
customize-cra利用react-app-rewired的config-overrides.js文件。通过导入customize-cra功能和出口几个函数调用包在我们的override功能，你可以很容易地修改底层配置对象（webpack，webpack-dev-server，babel等）组成create-react-app。
使用
注意：所有代码应添加到config-overrides.js与相同的级别package.json。
结合 webpack 配置
要使用这些插件，请导入override函数，然后使用所需的任何插件进行调用。这些插件调用中的每一个都将返回一个新函数，该函数override将使用新修改的config对象进行调用。但是，虚假值将被忽略，因此，如果您需要有条件地应用这些插件中的任何一个，则可以像下面这样进行操作。
const {
override,
addDecoratorsLegacy,
disableEsLint,
addBundleVisualizer,
addWebpackAlias,
adjustWorkbox
} = require("customize-cra");
const path = require("path");
module.exports = override(
// enable legacy decorators babel plugin
addDecoratorsLegacy(),
// disable eslint in webpack
disableEsLint(),
// add webpack bundle visualizer if BUNDLE_VISUALIZE flag is enabled
process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),
// add an alias for "ag-grid-react" imports
addWebpackAlias({
["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js")
}),
// adjust the underlying workbox
adjustWorkbox(wb =>
Object.assign(wb, {
skipWaiting: true,
exclude: (wb.exclude || []).concat("index.html")
})
)
);
结合 webpack-dev-server 配置
您可以使用该overrideDevServer功能覆盖webpack-dev-server配置。它的工作方式与override：
const {
override,
disableEsLint,
overrideDevServer,
watchAll
} = require("customize-cra");
module.exports = {
webpack: override(
// usual webpack plugin
disableEsLint()
),
devServer: overrideDevServer(
// dev server plugin
watchAll()
)
};
