react 應用多入口配置 && 實踐總結

curried 發布于2019-08-23 12:20 / 2368人閱讀

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

背景

還是之前的那個項目，做完國際化沒多久，還沒來得及劃水，又有新的活了 -- 移動端的兼容。考慮到后期的復雜度，需要做兩套資源。具體的目標是：同一個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

路由相關

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

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

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

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

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

其他

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

結語

以上就是全部的細節了，達到了預期的效果，但是也有很大優化空間。等后面一波需求做完了，再來做補充吧。:P

End。

參考資料：

https://medium.com/a-beginner...

http://imshuai.com/create-rea...

GPU云服務器云服務器 asp &amp&amp邏輯 js 2&amp&amp1 attr&039&039checked&039&039 OneTechCloud&amp

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98335.html

react 應用多入口配置 &amp;&amp; 實踐總結

摘要：如果不配置，則將所有的文件都注入。指明生成的路徑，如果不配置就是。配置了新的，避免與第一個入口相互覆蓋。甚至輸入顯然不存在的，也顯示為的內容。這種現象，初步判斷是服務器把所有請求重定向到了。至此，環境的多入口問題就解決了。前端根據自行配置。背景還是之前的那個項目，做完國際化沒多久，還沒來得及劃水，又有新的活了 -- 移動端的兼容。考慮到后期的復雜度，需要做兩套資源。具體的目...

Sike 2019-08-29 16:57 評論0 收藏0
前端每周清單第 29 期：Web 現狀分析與優化策略、Vue 單元測試、Headless Chrom

摘要：前端每周清單第期現狀分析與優化策略單元測試爬蟲作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清單第 29 期：Web 現狀分析與優化策略...

HackerShell 2019-08-21 12:05 評論0 收藏0
Byemess-基于React&amp;redux的在線Todo應用

摘要：在線注冊賬號，數據存儲于。年了，還不使用的異步控制體系。過度對數據模型進行裝飾的結果便是高耦合，這跟我初衷是基于在線存儲數據有關。為什么又是Todo，全世界的初學者都在做todo嗎？可能很多人要問這句話，其實這句話可以等同于：為什么你做了個云音樂播放器？為什么你做了個新聞閱讀APP？為什么你做了個VUE/REACT版本的CNODE？究其本質，這幾個應用都是data-map...

MRZYD 2019-08-20 17:07 評論0 收藏0
微前端qiankun安裝使用

一、前言大型中后臺項目一般包括10個以上的子項目，如果維護在一個單頁面應用中，項目就會越來越大，而且不利于版本的迭代，微前端就很好的解決了這些問題。這篇文章主要來體驗下螞蟻的微前端：qiankun，雖然比較成熟了，但在體驗過程中還是有一些問題，記錄總結下，項目代碼實踐項目以react單頁面應用為主應用，然后構建了三個微應用：react、vue3、node靜態頁面二、前期準備微前端要求多個前端服務，...

社區管理員 2022-10-08 14:59 評論0 收藏0
前端資源系列（4）-前端學習資源分享&amp;前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0