使用Facebook官方腳手架create-react-app建立React應用，預設只能生成一個SPA，入口是index.html。雖然，SPA的頁面切換可以使用前臺路由框架方便（比如React-Router）實現，這也是SPA的推薦做法；但某些情況下，仍要將頁面切分為多個頁面，或者在同一個工程開發多個SPA，比如一個是面向客戶的SPA，一個是後臺管理的SPA。
官方給出的回答是：
Sorry, but Create React App doesn't support this use case.
You can eject and then configure Webpack to have multiple entry points.
查閱create-react-app和webpack官方文件，測試如下方式可行，步驟如下：（假設在預設的index.html外增加一個admin.html）
1. Eject
要實現自定義配置，就需要先Eject出配置（此步驟對create-react-app工程不可逆）：npm run eject
執行後，package.js會被更新，工程下會多出config目錄，其中有webpack有兩個配置檔案，分別對應開發和生產環境（/config/webpack.config.dev.js和/config/webpack.config.prod.js）。這兩個配置檔案都要修改，但略有不同，下面以dev為例說明：
2. 修改webpack配置支援多入口
由於是使用webpack打包，先要讓webpack配置出多入口。/config/webpack.config.dev.js預設配置的入口如下：
entry: [
require.resolve('react-dev-utils/webpackHotDevClient'),
require.resolve('./polyfills'),
require.resolve('react-error-overlay'),
paths.appIndexJs,
],
output: {
path: paths.appBuild,
pathinfo: true,
filename: 'static/js/bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath),
},
根據webpack官方文件MULTIPLE ENTRY POINTS，可做如下修改：
要點是：
- entry從原來的陣列擴充套件為物件，每個key代表一個入口。
- output中的filename要區分輸出名，可增加[name]變數，這樣會根據entry分別編譯出每個entry的js檔案。
- 由於
path裡面沒有定義新的entry的路徑，圖方便可以直接寫死為paths.appSrc + "/admin.js"
entry: {
index: [
require.resolve('react-dev-utils/webpackHotDevClient'),
require.resolve('./polyfills'),
require.resolve('react-error-overlay'),
paths.appIndexJs,
],
admin:[
require.resolve('react-dev-utils/webpackHotDevClient'),
require.resolve('./polyfills'),
require.resolve('react-error-overlay'),
paths.appSrc + "/admin.js",
]
},
output: {
path: paths.appBuild,
pathinfo: true,
filename: 'static/js/[name].bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath),
},
這樣在src資料夾下，就可以再增加一個admin.js的入口，單獨寫新的SPA。
普通的webpack打包工程，到此即可實現多入口，但create-react-app流程更復雜，需繼續修改。
3. 修改HtmlWebpackPlugin生成多個HTML
Webpack配置多入口後，只是編譯出多個入口的JS，同時入口的HTML檔案由HtmlWebpackPlugin生成，也需做配置。
原配置如下：
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
修改為：
new HtmlWebpackPlugin({
inject: true,
chunks: ["index"],
template: paths.appHtml,
}),
new HtmlWebpackPlugin({
inject: true,
chunks: ["admin"],
template: paths.appHtml,
filename: 'admin.html',
}),
每調一次HtmlWebpackPlugin生成一次HTML頁面，故為admin.html多增加一個節點。其他要點如下：
chunks，指明哪些webpack入口的JS會被注入到這個HTML頁面。如果不配置，則將所有entry的JS檔案都注入HTML。filename，指明生成的HTML路徑，如果不配置就是build/index.html，admin配置了新的filename，避免與第一個入口的index.html相互覆蓋。
另外，template屬性也可以修改為不同的HTML模板，這裡的例子，我麼就和index入口共用HTML模板了。
4. 修改webpack Dev Server配置
上述配置做完後，理論就可以打包出多入口的版本；但使用npm start啟動後，發現無論輸入/index.html還是/admin.html，好像都是和原來/index.html顯示一樣的內容。甚至輸入顯然不存在的/xxxx.html，也顯示為/index.html的內容。
這種現象，初步判斷是HTTP伺服器把所有請求重定向到了/index.html。對於單頁應用，這種做法是沒有問題的（本來就一個頁面）；但我們新增的/admin.html就可以訪問了。
參考官方文件The historyApiFallback option，發現是webpack dev server的問題，還要額外做一些配置，需修改/config/webpackDevServer.config.js。
原配置如下：
historyApiFallback: {
disableDotRule: true,
},
修改為：
historyApiFallback: {
disableDotRule: true,
// 指明哪些路徑對映到哪個html
rewrites: [
{ from: /^\/admin.html/, to: '/build/admin.html' },
]
}
增加的rewrites節點，特別對/admin.html這個URL重定向為/build/admin.html頁面（也就是HtmlWebpackPlugin輸出的HTML檔案路徑），這樣/admin.html就可以正常訪問了。
至此，dev環境的多入口問題就解決了。
prod環境
prod環境，比dev環境更簡單。由於不存在webpack Dev Server，直接在config/webpack.config.prod.js同理做2和3步驟即可。
使用npm run build構建prod版本，觀察build目錄，入口/admin.html的html、js和css檔案俱在：
build
├── admin.html
├── asset-manifest.json
├── favicon.ico
├── index.html
├── manifest.json
├── service-worker.js
└── static
├── css
│ ├── admin.d41d8cd9.css
│ ├── admin.d41d8cd9.css.map
│ ├── index.9a0fe4f1.css
│ └── index.9a0fe4f1.css.map
├── js
│ ├── admin.f3dca2cd.js
│ ├── admin.f3dca2cd.js.map
│ ├── index.4b87195c.js
│ └── index.4b87195c.js.map
└── media
└── logo.5d5d9eef.svg