更新时间：2019-01-11
版本信息：CRA v2.1.1 + Webpack v4.19.1 + react-app-rewired v1.6.2
一、前言
为什么要进行多页面配置
在使用 React 进行开发的过程中，我们通常会使用 create-react-app 脚手架命令来搭建项目，避免要自己配置 webpack，提高我们的开发效率。但是使用 create-react-app 搭建的项目是单页面应用，如果我们是做中后台管理页面或 SPA，这样是满足要求的，但如果项目有多入口的需求，就需要我们进行一些配置方面的修改。
一般现在有两种方式将脚手架搭建的项目修改为多入口编译：
- 执行
npm run eject命令，弹出配置文件，进行自定义配置。请参见：React-CRA 多页面配置（npm run eject）。 - 使用 react-app-rewired 修改脚手架配置，在项目中安装 react-app-rewired 后，可以通过创建一个 config-overrides.js 文件来对 webpack 配置进行扩展。
本文对第 2 种方法给出具体配置方案，第 1 种方案详见：React-CRA 多页面配置（npm run eject）。在阅读本文之前，可以先了解一下第 1 种方案，有助于更好的理解本文内容。
webpack 基础
本文对 React 多页面应用配置的探讨是基于使用 create-react-app 脚手架命令构建的项目，并不是 webpack 多页面配置教程。但上述两种方案都应该具有一定的 webpack 的基础，实际上当你决定要改造或增强项目的构建打包配置的时候，你应该先对 webpack 进行一定的了解。
如果你之前使用 webpack v3.x 版本，这里附上 webpack v4.0.0 更新日志 以及 webpack4升级完全指南。
方案说明
通过使用 react-app-rewired 可以修改脚手架配置，从而实现扩展 webpack 配置，如增加对 less 文件的支持、增加 antd 组件的按需加载、处理 html 文档中的图片路径问题等，甚至可以将单页面入口编译修改为多页面入口编译的方式。
我们可以通过 react-app-rewired 在不暴露配置文件的情况下达到扩展项目配置的目的，同样我们也可以通过 react-app-rewired 来实现多页面入口编译的配置，但是这需要对脚手架原来的配置具有一定了解的，相较于 npm run eject 暴露配置文件的方式来说，这种方式是不太具有透明度的，后面维护的难度较大。本文的意义更多的是记录对这种方案的尝试，如果需要进行多页面配置，最好还是先了解一下通过执行 npm run eject 暴露配置文件的方案，具有了一定的多页面配置经验和 webpack 使用经验之后再使用这种方案。
本文方案完成的基础是，我之前已经通过 npm run eject 这种方式改造过一次多页面的配置，相当于说已经拆过这个箱子了，基本上了解了这个箱子里有什么，因此本文方案的配置其实是对照着 npm run eject 这个方案中的配置文件来逐步进行的。
版本的变动
使用 CRA 脚手架命令生成的项目免去了我们自己配置 webpack 的麻烦，其内置的各种配置所需要的插件和依赖包的版本都是确定的，是经过了检验的成熟配置，不会因为其中某个依赖包版本的问题造成构建出错。但当我们决定要自己动手配置 webpack 的时候，就意味着我们要自己根据需要安装一些 plugin 或 npm 依赖包，而这些插件和依赖包的版本可能不适用于当前 CRA 的版本，从而造成构建过程中出现一些不可预期的错误。
因此，我们需要查看 CRA 脚手架项目的 package.json 文件，对于其中已经列出的 dependencies 依赖包，我们不应该改变这些依赖包的版本，而对于未列出的 npm 包，我们在使用的过程中需要逐个验证，不要一次性安装很多个 npm 包，否则执行构建命令的时候如果出错就会很难排查，最好是根据我们需要的功能逐个的安装相应的 npm 包，确定没有问题，再进行下一个功能的扩展。
正是由于版本的变动会对配置产生很大的影响，因此当我们确定了一个配置方案之后，不要再轻易去改动其中涉及到的 npm 包的版本，通过 package-lock.json 文件锁定版本，防止配置方案错乱。
另外，在本文编辑的时候，CRA 的最新版本为 v2.1.2，这个版本的 CRA 生成的项目，当前版本的 react-app-rewired v1.6.2 已经无法使用，具体信息可以参见 CRA >=2.1.2 breaking issue 2.1.2。至少在本文编辑的时候（2019.01.05），是无法适用于 CRA >=2.1.2 版本的，因此本文方案是基于最后一个可以适用的 CRA v2.1.1 版本来做的，package.json 文件中其他的 version 信息会附在方案后面。
2019-01-11 补充：上面提到的版本基本都是指 package.json 文件中列出的依赖包的版本，但是严格来讲还应包含一些构建配置中使用的 node.js 工具包，比如 globby、dir-glob等，这些工具包的版本更新也有可能会造成构建出错。这种情况的出现往往是无法预期的，它们造成的影响一般比较广泛，而不仅仅是出现在我们方案配置的过程中，这种错误基本上都会在 Github 上有相应的 issue 以及解决方法或修复措施，本文中也列出了遇到的一个这种类型的错误，详见 四、错误排查 章节中的 其他错误 一节。
二、准备工作
创建一个 CRA v2.1.1 项目
我们的配置方案是基于 CRA v2.1.1 脚手架项目进行改造的，因此首先我们要先创建一个 CRA 项目，详见官方文档：Create React App。
但是这样创建出来的项目默认是最新版本的 CRA 项目，我们在上文中已经说明，我们的配置方案是要求特定版本的 CRA 项目的，那么如何创建特定的 CRA v2.1.1 版本项目？
CRA 项目版本的核心其实就是 react-scripts 的版本，我们可以先创建一个最新版本的脚手架项目，然后更改为 v2.1.1 版本，具体如下：
- 创建一个最新版本的 CRA 项目，参见官方文档：Create React App；
- 删除 node_modules 文件夹，如果有 package-lock.json 文件或 yarn.lock 文件，也要一并删除，否则重新安装 node_modules 依赖包仍然会被锁定为原来的版本；
修改 package.json 文件，重新指定 react-scripts 的版本：
"dependencies": { - "react": "^16.7.0", + "react": "^16.6.3", - "react-dom": "^16.7.0", + "react-dom": "^16.6.3", - "react-scripts": "2.1.3" + "react-scripts": "2.1.1" }- 执行
yarn install或npm install重新安装项目依赖。
至此，我们已经创建了一个 CRA v2.1.1 项目，这将作为我们进行多页面入口编译改造的基础。
react-app-rewired 的用法
首先要学习 react-app-rewired 的用法，参照官方文档：How to rewire your create-react-app project。
主要是三点：
- 安装 react-app-rewired
- 创建一个 config-overrides.js 文件
- 修改 package.json 文件中的脚本命令
查看 CRA 项目原有的配置文件
上面我们提到在进行多页面配置之前，需要对脚手架原有的配置文件具有一定了解，那么如何查看原有的配置文件？
方法1：将使用 CRA 脚手架命令生成的项目拷贝一份，执行
npm run eject暴露配置文件，eject 之后文件组织结构如下：my-app ├── config │ ├── jest │ ├── env.js │ ├── paths.js │ ├── webpack.config.dev.js │ ├── webpack.config.prod.js │ └── webpackDevServer.config.js ├── node_modules ├── public ├── scripts │ ├── build.js │ ├── start.js │ └── test.js ├── package.json ├── README.md └── src其中 config 文件夹下就是脚手架原有的配置文件。
- 方法2：使用 CRA 脚手架命令生成项目，在 my-app/node_modules/react-scripts/config 路径下可以看到原有的配置文件
- 方法3：在 config-overrides.js 文件中将 webpack 配置对象输出在控制台，查看其结构
推荐使用第 1 种方式，便于我们在配置过程中查看和操作，第 3 种方式作为一种辅助手段，主要是用于改造过程中的调试和验证配置对象的改造结果的。
项目文件组织结构
在开始进行多入口配置之前，需要先明确项目的文件组织结构，这关系到我们如何准确获取所有的入口文件，这里不再详述，请参见React-CRA 多页面配置（npm run eject）中的项目文件组织结构一节。
三、具体方案
- 安装 react-app-rewired，创建 config-overrides.js 文件，修改 package.json 文件中的脚本命令。详见官方文档 How to rewire your create-react-app project。
执行
yarn start命令，查看 http://localhost:3000，确保安装 react-app-rewired 操作没有问题。 修改文件组织结构。这里不再详述，参见上文 项目文件组织结构 一节。
CRA项目原文件组织结构为：my-app ├── README.md ├── node_modules ├── package.json ├── config-overrides.js // 安装 react-app-rewired 时创建的 ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg └── serviceWorker.js修改为多页面入口编译的文件组织结构：
// 本方案示例项目有两个页面 index.html & admin.html // 这里给出的文件组织结构是配置完成后的完整结构, 有些文件（如 src/setupProxy.js）的具体作用后面会给出说明 my-app ├── README.md ├── node_modules ├── package.json ├── config-overrides.js // 安装 react-app-rewired 时创建的 ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html // 作为所有页面的 html 模板文件 │ └── manifest.json └── src ├── index.js // 空白文件, 为了避免构建报错, 详见下文 ├── setupProxy.js // proxy 设置, 详见下文（在当前操作步骤中可以缺失） ├── index // index.html 页面对应的文件夹 │ ├── App.less │ ├── App.js │ ├── App.test.js │ ├── index.less // 使用 less 编写样式文件 │ ├── index.js │ ├── logo.svg │ └── serviceWorker.js └── admin // admin.html 页面对应的文件夹 ├── App.less ├── App.js ├── App.test.js ├── index.less // 使用 less 编写样式文件 ├── index.js ├── logo.svg └── serviceWorker.js执行
yarn start命令，查看 http://localhost:3000/index.html 和 http://localhost:3000/admin.html，确保修改文件组织结构操作没有问题。这个示例项目是以 my-app/public/index.html 作为所有页面的 html 模板文件的，当然也可以分别指定不同的 html 模板文件，这是根据项目需要和项目文件组织结构决定的。在这个示例项目中，由于作为模板的 html 文件只需要有个根元素即可，因此将其作为所有入口的 html 模板文件。这样的话，每个页面的 <title></title> 就需要在各自页面中分别指定，一般可以在页面挂载之后进行操作，比如：
class App extends Component { componentDidMount() { document.title = 'xxx'; } render() { return ( ... ); } }修改 config-overrides.js 文件，进行具体配置。实际上我们之后所有的操作都是在这个文件中进行的。
我们的测试方案是一个使用了 Ant Design、Redux、Less、Echarts 的多页面项目，需要达到以下要求：- 指定页面的多入口文件路径以及入口文件对应的 html 模板
- 实现 antd 组件的按需加载
- 增加对 less 文件的支持
- 更改输出的文件名
- 增加对 html 文档中图片路径的处理
- 更改代码拆分的配置
- 设置别名路径
上述每一个功能的实现，都需要执行 yarn start 或 yarn build 进行验证，确保操作成功后再进行下一项的配置。这里不再逐步说明配置的步骤，详见下面的代码及注释。
最终 config-overrides.js 文件内容如下：
/* config-overrides.js */
/*
* @Author: mzhang.eric
* @Last Modified time: 2019-01-10 18:37:17
* @Description: 使用 react-app-rewired 扩展和改造 CRA v2.1.1 项目, 基于 webpack v4.19.1 + react-app-rewired v1.6.2 版本
*/
const rewireLess = require('react-app-rewire-less');
const { injectBabelPlugin, paths } = require('react-app-rewired');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const fs = require('fs');
const globby = require('globby');
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = function override(config, env) {
// 使用 babel-plugin-import 按需加载组件
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
config,
);
// 增加 less 支持
config = rewireLess.withLoaderOptions({
// 解决报错: Inline JavaScript is not enabled. Is it set in your options?
javascriptEnabled: true,
})(config, env);
// 入口文件路径
// const entriesPath = globby.sync([resolveApp('src') + '/*/index.js']);
const entriesPath = globby.sync([resolveApp('src') + '/*/index.js'], {cwd: process.cwd()});
paths.entriesPath = entriesPath;
// 获取指定路径下的入口文件
function getEntries(){
const entries = {};
const files = paths.entriesPath;
files.forEach(filePath => {
let tmp = filePath.split('/');
let name = tmp[tmp.length - 2];
if(env === 'production'){
entries[name] = [
require.resolve('./node_modules/react-scripts/config/polyfills.js'),
filePath,
];
} else {
entries[name] = [
require.resolve('./node_modules/react-scripts/config/polyfills.js'),
require.resolve('react-dev-utils/webpackHotDevClient'),
filePath,
];
}
});
return entries;
}
// 入口文件对象
const entries = getEntries();
// 配置 HtmlWebpackPlugin 插件, 指定入口文件生成对应的 html 文件
let htmlPlugin;
if(env === 'production'){
htmlPlugin = Object.keys(entries).map(item => {
return new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
filename: item + '.html',
chunks: [item],
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
});
});
} else {
htmlPlugin = Object.keys(entries).map(item => {
return new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
filename: item + '.html',
chunks: [item],
});
});
}
if (env === 'production') {
for (let i = 0; i < config.plugins.length; i++) {
let item = config.plugins[i];
// 更改输出的样式文件名
if (item.constructor.toString().indexOf('class MiniCssExtractPlugin') > -1) {
item.options.filename = 'static/css/[name].css?_v=[contenthash:8]';
item.options.chunkFilename = 'static/css/[name].chunk.css?_v=[contenthash:8]';
}
// SWPrecacheWebpackPlugin: 使用 service workers 缓存项目依赖
if(item.constructor.toString().indexOf('function GenerateSW') > -1){
// 更改输出的文件名
item.config.precacheManifestFilename = 'precache-manifest.js?_v=[manifestHash]';
}
}
// 更改生产模式输出的文件名
config.output.filename = 'static/js/[name].js?_v=[chunkhash:8]';
config.output.chunkFilename = 'static/js/[name].chunk.js?_v=[chunkhash:8]';
} else {
// 更改开发模式输出的文件名
config.output.filename = 'static/js/[name].js';
config.output.chunkFilename = 'static/js/[name].chunk.js';
}
// 修改入口
config.entry = entries;
// 修改 HtmlWebpackPlugin 插件
for (let i = 0; i < config.plugins.length; i++) {
let item = config.plugins[i];
if (item.constructor.toString().indexOf('class HtmlWebpackPlugin') > -1) {
config.plugins.splice(i, 1);
}
}
config.plugins.push(...htmlPlugin);
// 分析打包内容
// config.plugins.push(new BundleAnalyzerPlugin());
// 设置别名路径
config.resolve.alias = {
...config.resolve.alias,
'@src': paths.appSrc, // 在使用中有些 Eslint 规则会报错, 禁用这部分代码的 Eslint 检测即可
};
// 处理 html 文档中图片路径问题
config.module.rules[2].oneOf.push({
test: /\.html$/,
loader: 'html-withimg-loader'
});
// 修改 build/static/media/ 路径下的文件名
for (let i = 0; i < config.module.rules[2].oneOf.length; i++) {
const item = config.module.rules[2].oneOf[i];
if(!item.options || !item.options.name){
continue;
}
let str = item.options.name.toString();
if(str.indexOf('static/media/[name].[hash:8].[ext]') > -1){
item.options.name = 'static/media/[name].[ext]?_v=[hash:8]';
}
}
// 修改代码拆分规则，详见 webpack 文档：https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks
config.optimization = {
splitChunks: {
// 将所有入口点共同使用到的、次数超过 2 次的模块，创建为一个名为 commons 的代码块
// 这种配置方式可能会增大初始的捆绑包，比如有些公共模块在首页其实并未用到，但也会打包进来，会降低首页的加载性能
// 建议将非必需模块使用 import() 的方式动态加载，提升页面的加载速度
// cacheGroups: {
// commons: {
// name: 'commons',
// chunks: 'initial',
// minChunks: 2
// }
// }
// 将所有使用到的 node_modules 中的模块包打包为 vendors 代码块。（不推荐）
// 这种方式可能会产生一个包含所有外部依赖包的较大代码块，建议只包含核心框架和工具函数代码，其他依赖项动态加载
// cacheGroups: {
// commons: {
// test: /[\\/]node_modules[\\/]/,
// name: 'vendors',
// chunks: 'all'
// }
// }
cacheGroups: {
// 通过正则匹配，将 react react-dom echarts-for-react 等公共模块拆分为 vendor
// 这里仅作为示例，具体需要拆分哪些模块需要根据项目需要进行配置
// 可以通过 BundleAnalyzerPlugin 帮助确定拆分哪些模块包
vendor: {
test: /[\\/]node_modules[\\/](react|react-dom|echarts-for-react)[\\/]/,
name: 'vendor',
chunks: 'all', // all, async, and initial
},
// 将 css|less 文件合并成一个文件, mini-css-extract-plugin 的用法请参见文档：https://www.npmjs.com/package/mini-css-extract-plugin
// MiniCssExtractPlugin 会将动态 import 引入的模块的样式文件也分离出去，将这些样式文件合并成一个文件可以提高渲染速度
// 其实如果可以不使用 mini-css-extract-plugin 这个插件，即不分离样式文件，可能更适合本方案，但是我没有找到方法去除这个插件
styles: {
name: 'styles',
test: /\.css|less$/,
chunks: 'all', // merge all the css chunk to one file
enforce: true
}
},
},
};
return config;
};四、错误排查
这里对方案形成过程中遇到的错误进行记录，这些错误有些是配置过程中必定会出现的，是需要我们进行改造的，也有些错误可能是操作不当主观造成的。
客观错误
这类错误是进行多页面入口编译改造过程中必定会遇到的，有些是由于项目文件组织结构的改变造成的，也有些是为了扩展项目配置而使用了源 CRA 脚手架项目未提供的 npm 包造成的，前者会出现哪些错误我们是可以明确知道的，后者相对来说是不确切的，但大多都是版本不适用造成的。
Could not find a required file.
Could not find a required file.
Name: index.js
Searched in: C:xxxxxxmy-appsrc
错误描述：通过 create-react-app 脚手架搭建的项目以 my-app/src/index.js 作为应用入口，当执行构建脚本时如果检测到缺失了这个必要文件，node 进程会退出。但是在我们进行多页面入口改造的时候，src 直接路径下没有 index.js 文件，根据我们的文件组织结构，index.js 文件存在于每个独立页面的子文件夹下，如
my-app/src/index/index.jsmy-app/src/admin/index.js。
解决方法：在 src 直接路径下创建一个空的 index.js 文件。Inline JavaScript is not enabled. Is it set in your options?
//
https://github.com/ant-design….bezierEasingMixin();^ Inline JavaScript is not enabled. Is it set in your options?
in C:xxxsrcmy-appnode_modulesantdesstylecolorbezierEasing.less (line 110, column 0)
错误描述：less、less-loader 配置问题，提示需要允许行内 js 的执行，比如当我们在项目中使用 antd 组件时，如果引入的样式文件是 less 文件，构建时就会报上述错误。
解决方法：在 config-overrides.js 文件中增加 less 文件支持时，设置 javascriptEnabled 为 true。module.exports = function override(config, env) { ... // 增加 less 支持 config = rewireLess.withLoaderOptions({ // 解决报错: Inline JavaScript is not enabled. Is it set in your options? javascriptEnabled: true, })(config, env); ... return config; };Failed to load resource: net::ERR_FILE_NOT_FOUND（build 版本）
错误描述：执行
yarn build或npm run build构建生产版本时，构建出的页面未能正确加载样式和脚本文件，chrome 检查工具报路径错误。
解决方法：修改 package.json 文件，指定 homepage 字段的值，本项目这里指定为相对路径。"homepage": "./",When specified, “proxy” in package.json must be a string.
When specified, “proxy” in package.json must be a string.
Instead, the type of “proxy” was “object”.
Either remove “proxy” from package.json, or make it a string.
错误描述：我们在开发过程中一般会在 package.json 文件中配置 proxy 代理服务器，但是在 CRA 2.x 升级以后对 proxy 的设置做了修改，具体请参见官方升级文档：Move advanced proxy configuration to src/setupProxy.js
解决方法：移除 package.json 文件中有关 proxy 的设置，使用 http-proxy-middleware，在 src 目录下创建 setupProxy.js 文件。详细方法请参见上述文档。
主观错误
这类错误应该是可以避免的，但是在配置过程中可能会由于开发人员的不当操作造成出错，最主要的就是安装了错误版本的 plugin 或 npm 包，我们上面已经说过，对于项目原本的配置中在 package.json 文件中已经列出的 plugin 和 npm 包，不要再重复进行安装，否则可能重新安装的 plugin 或 npm 包版本是不适用的，从而造成出错。
例如，CRA v2.1.1 脚手架项目原有的 html-webpack-plugin 版本是 v4.0.0-alpha.2，是不需要再另外进行安装的。如果此时开发人员自己执行了 yarn add html-webpack-plugin，从而将 html-webpack-plugin 的版本更换为了 v3.2.0，这就会造成构建报错：URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico' URIError: Failed to decode param '/%PUBLIC_URL%/manifest.json'，其他主观错误类似。
html-webpack-plugin 版本错误
URIError: Failed to decode param ‘/%PUBLIC_URL%/favicon.ico’
URIError: Failed to decode param ‘/%PUBLIC_URL%/manifest.json’
错误描述：在执行
yarn start构建命令时报错，页面空白。
解决方法：html-webpack-plugin 版本错误，在本文的配置方案中，应当使用"html-webpack-plugin": "4.0.0-alpha.2",版本。- TypeError: Cannot read property ‘state’ of undefined（页面报错）
错误描述：编译构建过程没有报错，但页面报错：TypeError: Cannot read property ‘state’ of undefined。
解决方法：redux 版本错误，在本文的配置方案中，应当使用 redux <=3.7.2 版本。
其他错误
我们在上文 版本的变动 一节的补充中已经对此有所提及，这类错误主要是由 node.js 工具包版本的升级造成的，这些错误基本都是不可预期的，也无法在这里全部涵盖，只能就当前遇到的问题进行简要记录，可能随着时间的推移，还会出现其他的类似问题，也可能这些错误已经在后续的版本中被修复了，因此请勿纠结于这里记录的错误，如果遇到了这类错误，就查阅资料进行修正，如果没有遇到，则无须理会。
TypeError: Expected
cwdto be of typestringbut received typeundefinedC:xxxmy-appnode_modulesdir-globindex.js:59
throw new TypeError(
Expected \cwd` to be of type `string` but received type `${typeof opts.cwd}“);TypeError: Expected
cwdto be of type
stringbut received type
undefined错误描述：本文的写作开始于 2019-01-05，在 2019-01-11 重新审核本文方案的时候，遇到了这个错误，主要是由于 dir-glob 版本的升级造成的，我们在配置脚本中使用了 globby 的 sync 方法，dir-glob 版本升级之后，这个方法的调用会使得 dir-glob 抛出上述错误。详细信息参见：Broken build do to major change from 2.0 to 2.2 以及 globby will pass opts.cwd = undefined to dir-glob, which leads to TypeError.
解决方法：这里给出的解决方法是限定于当前时间的，因为在本文编辑的时候（2019-01-11）这个 issue 还没有给出最终的解决方案，个人觉得可能会由 globby 进行修复。
/* config-overrides.js */ // 修改获取入口文件路径的代码 // const entriesPath = globby.sync([resolveApp('src') + '/*/index.js']); const entriesPath = globby.sync([resolveApp('src') + '/*/index.js'], {cwd: process.cwd()});
五、package.json 信息
本文的多页面配置方案是基于 CRA 脚手架项目的，项目的依赖包信息会包含在两个 package.json 文件中，其中脚手架自带的配置信息位于 my-app/node_modules/react-scripts/package.json 文件中，而我们根据项目需要自己增加的配置信息在 my-app/package.json 文件中，这里将本方案项目配置信息附录如下：
/* package.json */
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd": "^3.12.1",
"babel-plugin-import": "^1.11.0",
"echarts": "^4.2.0-rc.2",
"echarts-for-react": "^2.0.15-beta.0",
"html-withimg-loader": "^0.1.16",
"http-proxy-middleware": "^0.19.1",
"react": "^16.6.3",
"react-app-rewire-less": "^2.1.3",
"react-app-rewired": "^1.6.2",
"react-dom": "^16.6.3",
"react-intl": "^2.7.2",
"react-lazyload": "^2.3.0",
"react-loadable": "^5.5.0",
"react-redux": "^6.0.0",
"react-scripts": "2.1.1",
"redux": "3.7.2",
"redux-promise-middleware": "^5.1.1",
"webpack-bundle-analyzer": "^3.0.3"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"homepage": "./"
}