react 應(yīng)用多入口配置 && 實(shí)踐總結(jié)

curried 發(fā)布于2019-08-23 12:20 / 2377人閱讀

摘要：如果不配置，則將所有的文件都注入。指明生成的路徑，如果不配置就是。配置了新的，避免與第一個(gè)入口相互覆蓋。甚至輸入顯然不存在的，也顯示為的內(nèi)容。這種現(xiàn)象，初步判斷是服務(wù)器把所有請(qǐng)求重定向到了。至此，環(huán)境的多入口問題就解決了。前端根據(jù)自行配置。

背景

還是之前的那個(gè)項(xiàng)目，做完國際化沒多久，還沒來得及劃水，又有新的活了 -- 移動(dòng)端的兼容。考慮到后期的復(fù)雜度，需要做兩套資源。具體的目標(biāo)是：同一個(gè)URL，PC打開就顯示PC的那一套， M端打開就顯示Mobile的頁面。 create-react-app 腳手架本身不支持多入口，需要改造，今天下午研究了一下，改造了一波，基本達(dá)到了預(yù)期，在這里簡單把經(jīng)驗(yàn)總結(jié)分享下。

先睹為快

Mobile:

PC:

輸出之后的文件，相比之前的index.html，多了一個(gè)額外的mobile.html.

最終的源代碼目錄：

具體的改造步驟如下：

Steps step1: Eject

在下之前圖方便，直接用了create-react-app，現(xiàn)在需要更改配置，需要彈出默認(rèn)配置:

在終端執(zhí)行：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, "/"),
  },

可能需要注意的幾點(diǎn)：

entry從原來的數(shù)組擴(kuò)展為對(duì)象，每個(gè)key代表一個(gè)入口。

output中的filename要區(qū)分輸出名，可增加[name]變量，這樣會(huì)根據(jù)entry分別編譯出每個(gè)entry的js文件。

這樣你就可以在src 目錄下新起一個(gè)民目錄開發(fā)新的SPA：

step3: 生成多個(gè)html入口文件

Webpack配置多入口后，只是編譯出多個(gè)入口的Js，入口的HTML文件也需要配置，可以用HtmlWebpackPlugin來生成。

webpack.config.dev.js 原配置：

    // Generates an `index.html` file with the 

路由相關(guān)
到這， 已經(jīng)可以手動(dòng)修改URL 來訪問pc 和 mobile的頁面了。 還有一個(gè)問題沒有解決：
URL最后肯定是不能給你手動(dòng)改來改去的， 需要根據(jù)設(shè)備的情況自己判斷， 這里有兩個(gè)思路：
1: 配置 Nginx 的路徑的時(shí)候, 加多一個(gè)alias 的映射。
2: 前端根據(jù)UA自行配置。
為了快速出效果， 簡單搞了一下， 具體代碼如下：

這樣， 不用手動(dòng)修改URL 也能根據(jù)UA自動(dòng)顯示不同的頁面了, 具體的效果圖在文章開頭的先睹為快中。
其他
上面的路由就為了簡單的出個(gè)效果， 比較粗暴， 僅供參考。
結(jié)語
以上就是全部的細(xì)節(jié)了， 達(dá)到了預(yù)期的效果， 但是也有很大優(yōu)化空間。 等后面一波需求做完了， 再來做補(bǔ)充吧。:P
End。
參考資料：
https://medium.com/a-beginner...
http://imshuai.com/create-rea...