暴露全部配置 eject 十分不友好，我们基于 customize-cra 和 react-app-rewired 进行自定义配置：
yarn add -D customize-cra react-app-rewired之后修改 package.json 的 scripts 部分：
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "_eject": "react-scripts eject" },注意前三个命令只是把原来的 react-scripts 替换为了 react-app-rewired ，最后 eject 为了安全我加了下划线（你也可以不修改最后一行 eject ）。
下面就可以开始自定义配置了。
根目录下建立一个配置重写文件 config-overrides.js ，刚刚安装的依赖就会注入 react 内帮我们 override 相应的配置。
我们开一个新项目，使用 eject 暴露所有配置，会发现根目录下生成了 config 目录，下面有 react 的所有配置文件：
很多教程都只讲如何配置 webpack.config.js ，那其他文件怎么配置呢？
在 config-overrides.js 写入如下内容：
const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { paths: function (paths) { paths.appBuild = resolve('./dist') return paths } }先导入了 path 依赖并写了 resolve() 函数用来补全路径，path.resolve() 这个函数也可以补全，不过在 ('/a', '/b') 情况下，只有 path.join() 是可以补全为 /a/b 的。
之后导出我们要重写的配置对象，键就是你要重写的配置文件名，要重写 paths.js ，那就是 paths 这个键下进行重写。
之后 build 打包生成的内容就会在 ./dist 下而不是默认的 ./build 下。
如果你要查看所有 paths.js 的配置，第一种方法你重开一个 react 项目使用 eject 去查看有什么选项，第二种方法你在里面打印即可：
module.exports = { paths: function (paths) { paths.appBuild = resolve('./dist') console.log(paths) return paths } }我们执行 yarn start 就可以看到所有配置了：
这些配置和 eject 暴露全部配置后生成的 paths.js 是一样的：
根据上面的经验，我们配置 webpack 只需要如下写法即可：
module.exports = { webpack: override() }下面几个例子简单说明。
在 customize-cra 里给我们提供了一些封装好的 api ，我们直接使用就可以：
const { override, addWebpackAlias } = require('customize-cra') const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { webpack: override( addWebpackAlias({ '@': resolve('src') }) }这里使用了 addWebpackAlias() 这个 api ，十分方便。
完整 api 请查看：官方 api 文档
先安装基本依赖：
yarn add -D less less-loader react-app-rewire-less react-app-rewire-less-modules之后配置 config-overrides.js ：
const { override, addWebpackAlias } = require('customize-cra') const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { webpack: override( addLessLoader() }这样就可以打开 less-loader 了。
如果我们直接在项目入口 index.jsx 或 app.jsx 导入 .less 是不能识别到定义的变量的（样式可以），我们要在 less-loader 选项中导入全局资源：
module.exports = { webpack: override( addLessLoader({ additionalData: `@import "${ resolve('./src/assets/css/variable.less') }";` }) }官方对 addLessLoader() 这个 api 的参数定义是 loaderOptions ，也就是说里面可以传 less-loader 的配置对象。
less-loader 可配置项：webpack-contrib / less-loader
注：正如 vue-cli 在 css 相关 所说，该 @import "..."; 导入语句结尾必须要有分号！
customize-cra 给我们提供的 api 不多，但是如同之前配置 paths.js 所说，我们可以用一个函数配置全部 webpack 的配置：
const fs = require('fs') module.exports = { webpack: override( (config) => { if (process.env.NODE_ENV === "production") { // 进行生产环境的配置 } // 打印配置 console.log(config) // 输出到文件（有些对象内部配置没法在控制台显示） fs.writeFileSync(`./config-${process.env.NODE_ENV}.json`, JSON.stringify(config)) } ) }注：该函数只能传入一次。
下面说几个实用配置。
如果你在上面一步中将 config 打印到了控制台，你会发现插件都无法显示内部配置：
但是输出到文件会发现，丢失了插件名字，成了一个个对象：
好心的 OptimizeCssAssetsWebpackPlugin 还给我们准备了插件说明，但是 TerserPlugin 却只是一个配置对象，没有任何说明，我们也不知道哪个对象是哪个插件的。
我们可以使用构造函数名字解决这个问题：
/** * @param target: 要遍历的对象 * @param name: 插件名 * @param callback: 回调函数，第一个参数为该插件对象 * @return null */ function invade(target, name, callback) { target.forEach( item => { if (item.constructor.name === name) { callback(item) } } ) }有了上面的 invade() 函数，我们可以这样写：
module.exports = { webpack: override( (config) => { if (process.env.NODE_ENV === "production") { invade(config.optimization.minimizer, 'TerserPlugin', (e) => { // 去除 LICENSE.txt e.options.extractComments = false // 去除生产环境 console.log e.options.terserOptions.compress.drop_console = true }) } } ) }react 官方很好心的给我们准备了这个环境变量，在 eject 后的 webpack.config.js 可以看到：
在根目录建立 .env.production ：
GENERATE_SOURCEMAP = false默认打包后文件名带 .chunk 结尾，去掉即可：
module.exports = { webpack: override( (config) => { if (process.env.NODE_ENV === "production") { // 美化打包后 js 文件名 config.output.chunkFilename = config.output.chunkFilename.replace('.chunk', '') // 美化打包后 css 文件名 invade(config.plugins, 'MiniCssExtractPlugin', (e) => { e.options.chunkFilename = e.options.chunkFilename.replace('.chunk', '') }) } ) }有关 runtime 为何要内联，简单的说就是避免几 K 的文件还要单独加载一次，提高加载速度，你可以查找一些其他资料深入学习。
需要说的一点是，react 官方给我们提供了 process.env.INLINE_RUNTIME_CHUNK 选项，但是他不会配合 babel ，生成的 runtime 内联到 index.html 后仍然在 js 文件夹下生成，这是不友好的。
我们使用 script-ext-html-webpack-plugin ：
yarn add -D script-ext-html-webpack-plugin配置：
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin') module.exports = { webpack: override( (config) => { if (process.env.NODE_ENV === "production") { config.plugins.push( new ScriptExtHtmlWebpackPlugin( { // `runtime` must same as runtimeChunk name. default is `runtime` inline: /runtime\..*\.js$/ }) ) // 单一整合 runtime config.optimization.runtimeChunk = 'single' } ) }注：不知道有没有细心的人会疑惑，customize-cra 给我们提供了 addWebpackPlugin() 的快捷 api 啊，为啥还要 push ，这里不详细说明了，有兴趣可以去查一下该 api 的代码，也是做了 config.push() ，在我们自定义的 (config) => { } 函数里用了是不生效的，因为没有 config 对象给他了，只能在外面用。
外面怎么用？
module.exports = { webpack: override( process.env.NODE_ENV === "production" ? addWebpackPlugin(new ScriptExtHtmlWebpackPlugin(...)) : null ) }应该没有人会这么用。
之后再打包就会发现，runtime 内联到了 index.html ，并且在 js 文件夹下不再生成了。
这里直接把 vue 的搬过来：
module.exports = { webpack: override( (config) => { if (process.env.NODE_ENV === "production") { config.optimization.splitChunks = { chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' // only package third parties that are initially dependent }, commons: { name: 'chunk-commons', test: resolve('src/components'), // can customize your rules minChunks: 3, // minimum common number priority: 5, reuseExistingChunk: true } } } } ) }非常易懂，不详细说明了。
在预加载和懒加载上也有一定的学问，可以先学习这篇文章：
《[译] React 16.6 懒加载(与预加载)组件》
在 webpack 4 中这么用即可：
() => import(/* webpackPrefetch: true */ "./pages/home")有关 preload 请参考 这里 ，不需要 preload 。
能参照 vue 进行的优化配置还有很多，比如 svg 的配置，自行参照搬过来即可。
还有两个没有说到：
我如何知道 react 内置了什么插件：请打印 config.pluginsreact 打包后路由块的文件名不好看：请配置 webpackChunkName ：() => import(/* webpackChunkName: "home" */ "./pages/home") 之后就会打包出来 home.contenthash.js 。本文全部配置如下：
const { override, addLessLoader, addWebpackAlias } = require('customize-cra') // const fs = require('fs') const path = require('path') const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin') /** * @param target: 要遍历的对象 * @param name: 插件名 * @param callback: 回调函数，第一个参数为该插件对象 * @return null */ function invade(target, name, callback) { target.forEach( item => { if (item.constructor.name === name) { callback(item) } } ) } function resolve(dir) { return path.join(__dirname, dir) } module.exports = { paths: function (paths) { paths.appBuild = resolve('./dist') return paths }, webpack: override( addWebpackAlias({ '@': resolve('src'), }), addLessLoader({ additionalData: `@import "${ resolve('./src/assets/css/variable.less') }";` }), (config) => { if (process.env.NODE_ENV === "production") { config.devtool = false; config.output.chunkFilename = config.output.chunkFilename.replace('.chunk', '') invade(config.optimization.minimizer, 'TerserPlugin', (e) => { e.options.extractComments = false e.options.terserOptions.compress.drop_console = true }) invade(config.plugins, 'MiniCssExtractPlugin', (e) => { e.options.chunkFilename = e.options.chunkFilename.replace('.chunk', '') }) config.optimization.splitChunks = { chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' // only package third parties that are initially dependent }, commons: { name: 'chunk-commons', test: resolve('src/components'), // can customize your rules minChunks: 3, // minimum common number priority: 5, reuseExistingChunk: true } } } config.plugins.push( new ScriptExtHtmlWebpackPlugin( { // `runtime` must same as runtimeChunk name. default is `runtime` inline: /runtime\..*\.js$/ }) ) config.optimization.runtimeChunk = 'single' } // fs.writeFileSync(`./config-${process.env.NODE_ENV}.json`, JSON.stringify(config)) return config } ) }这不是一个完美的配置，还有一些细节和 svg 内联没有追究，有时间可以自行参照配一下，但基本上复现了在 vue 中我们的配置。
《vue-cli创建项目后优化更多配置（一）》
《vue-cli创建项目后优化更多配置（二）》
《vue-cli创建项目后优化更多配置（三）》
