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

背景

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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), },

須要修改成：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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 原配置：

?

1 2 3 4 5 6

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

須要加多一個配置， 改爲：

?

1 2 3 4 5 6 7 8 9 10 11 12

// 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：

原配置：

?

1 2 3 4 5

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

修改成：

?

1 2 3 4 5 6 7 8 9

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自動顯示不一樣的頁面了, 具體的效果圖在文章開頭的先睹爲快中。

其餘

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

 

ES6零基礎教學 解析彩票項目   ...2
2017 Javascript基礎到精通 23課 附課件源碼
WEB前端開發零基礎入門到項目實戰練習 18課
MUI+HTML5開發webapp技術
移動前端跨平臺技術——ES6基礎+React Native項目實戰
主流JsUI框架 後臺開發必備jQuery Easyui 視頻教程 13課
HTML5教程從入門到精通及網站源碼
Javascript ES6 實戰視頻課程  ...2
李炎恢JQuery EasyUI視頻培訓視頻教程
李炎恢Bootstrap視頻教程
李炎恢老師HTML5+CSS3教程與課件代碼
李炎恢老師XHTML視頻教程DIV+CSS教程與課件代碼
完全征服React.js + Flux + Redux
所向披靡的響應式開發-某課網   ...2
webApp閱讀器實戰項目視頻教程
2016年傳智播客web前端14期
HTML5實例教程[共13課時]
HTML5入門視頻教程【秀野堂】
HTML5網頁設計初窺系列課程
華中紅客基地html網頁設計培訓班[共50課時]