來自：
http://imshuai.com/create-react-app-multiple-entry-points/
https://github.com/JoV5/blog/blob/master/%E5%89%8D%E7%AB%AF/React/%E7%94%A8create-react-app%E5%AE%9A%E5%88%B6%E8%87%AA%E5%B7%B1%E7%9A%84react%E9%A1%B9%E7%9B%AE%E6%A8%A1%E6%9D%BF.md#%E5%A4%9A%E5%85%A5%E5%8F%A3
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配置出多入口。
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
