背景

還是之前的那個專案，做完國際化沒多久，還沒來得及划水， 又有新的活了 – 移動端的相容。 考慮到後期的複雜度， 需要做兩套資源。 具體的目標是：同一個URL，PC開啟就顯示PC的那一套， M端開啟就顯示Mobile的頁面。 create-react-app 腳手架本身不支援多入口， 需要改造，今天下午研究了一下，改造了一波， 基本達到了預期， 在這裡簡單把經驗總結分享下。

先睹為快

Mobile:

PC:

輸出之後的檔案， 相比之前的index.html， 多了一個額外的mobile.html.

最終的原始碼目錄：

具體的改造步驟如下：

Steps

step1: Eject

在下之前圖方便， 直接用了create-react-app， 現在需要更改配置， 需要彈出預設配置:

在終端執行：yarn eject.

step2: 修改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),
},
 

需要修改為：

entry: {
  index: [
   require.resolve('./polyfills'),
   require.resolve('react-dev-utils/webpackHotDevClient'),
   paths.appIndexJs,
  ],
  mobile: [
   require.resolve('./polyfills'),
   require.resolve('react-dev-utils/webpackHotDevClient'),
   paths.appSrc + "/mobile/index.js",
  ]
 },
 output: {
  pathinfo: true,
  filename: 'static/js/[name].bundle.js',
  chunkFilename: 'static/js/[name].chunk.js',
  publicPath: publicPath,
  devtoolModuleFilenameTemplate: info =>
   path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
 },
 

可能需要注意的幾點：

• entry從原來的陣列擴充套件為物件，每個key代表一個入口。
• output中的filename要區分輸出名，可增加[name]變數，這樣會根據entry分別編譯出每個entry的js檔案。

這樣你就可以在src 目錄下新起一個民目錄開發新的SPA：

step3: 生成多個html入口檔案

Webpack配置多入口後，只是編譯出多個入口的Js，入口的HTML檔案也需要配置， 可以用HtmlWebpackPlugin來生成。

webpack.config.dev.js 原配置：

// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
 inject: true,
 chunks: ["index"],
 template: paths.appHtml,
}),

需要加多一個配置， 改成：

// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
 inject: true,
 chunks: ["index"],
 template: paths.appHtml,
}),
new HtmlWebpackPlugin({
 inject: true,
 chunks: ["mobile"],
 template: paths.appHtml,
 filename: 'mobile.html',
}),

• 每調一次HtmlWebpackPlugin生成一次HTML頁面，這裡有兩個，所以就會多增加一個mobile.html節點。
• chunks： 指明哪些webpack入口的js會被注入到這個HTML頁面。如果不配置，則將所有entry的JS檔案都注入HTML。
• filename: 指明生成的HTML路徑，如果不配置就是dist/index.html。mobile配置了新的filename，避免與第一個入口相互覆蓋。
• template： 指定模版， 我這裡因為用的這兩個模版都一樣， 所以就指定的同一個appHtml, 如有特殊需求， 就新建一個html 檔案， 在template欄位裡引用即可。

Step4: 配置webpack Dev Server

上述配置做完後，理論就可以打包出多入口的版本；但使用npm start啟動後，發現無論輸入/index.html還是/mobile.html，好像都是和原來/index.html顯示一樣的內容。

甚至輸入顯然不存在的/xxxx.html，也顯示為/index.html的內容。

這種現象，初步判斷是HTTP伺服器把所有請求重定向到了/index.html。

對於單頁應用，這種做法是沒有問題的（本來就一個頁面), 但我們新增的/mobile.html就可以訪問到了。

參考官方文件 The historyApiFallback option，發現是webpack dev server的問題，還要額外做一些配置，需修改webpackDevServer.config.js：

原配置：

historyApiFallback: {
 // Paths with dots should still use the history fallback.
 // See https://github.com/facebookincubator/create-react-app/issues/387.
 disableDotRule: true,
},

修改為：

historyApiFallback: {
 // Paths with dots should still use the history fallback.
 // See https://github.com/facebookincubator/create-react-app/issues/387.
 disableDotRule: true,
 // 指明哪些路徑對映到哪個html
 rewrites: [
  { from: /^\/mobile.html/, to: '/dist/mobile.html' },
 ]
},

增加的rewrites節點，特別對/admin.html這個URL重定向為/dist/mobile.html頁面（也就是HtmlWebpackPlugin輸出的HTML檔案路徑），這樣/mobile.html就可以正常訪問了。

至此，dev環境的多入口問題就解決了。

*step5: Prod 環境配置

prod環境，比dev環境更簡單。由於不存在webpack Dev Server，直接在config/webpack.config.prod.js同理做2和3步驟即可。

這時候你就可以通過手動修改URl 來訪問了：

路由相關

到這， 已經可以手動修改URL 來訪問pc 和 mobile的頁面了。 還有一個問題沒有解決：

URL最後肯定是不能給你手動改來改去的， 需要根據裝置的情況自己判斷， 這裡有兩個思路：

1: 配置 Nginx 的路徑的時候, 加多一個alias 的對映。
2: 前端根據UA自行配置。

為了快速出效果， 簡單搞了一下， 具體程式碼如下：

這樣， 不用手動修改URL 也能根據UA自動顯示不同的頁面了, 具體的效果圖在文章開頭的先睹為快中。

其他

上面的路由就為了簡單的出個效果， 比較粗暴， 僅供參考。

最後

為了幫助大家讓學習變得輕鬆、高效，給大家免費分享一大批資料，幫助大家在成為全棧工程師，乃至架構師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習交流圈：866109386.歡迎大家進群交流討論，學習交流，共同進步。

當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。

但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有有效資源還是很有必要的。

最後祝福所有遇到瓶疾且不知道怎麼辦的前端程式設計師們，祝福大家在往後的工作與面試中一切順利。