快捷導(dǎo)航

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

更新時(shí)間：2018年10月17日 11:23:55 作者：皮小蛋

這篇文章主要介紹了react 應(yīng)用多入口配置及實(shí)踐總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

背景

還是之前的那個(gè)項(xiàng)目，做完國際化沒多久，還沒來得及劃水，又有新的活了 -- 移動(dòng)端的兼容。考慮到后期的復(fù)雜度，需要做兩套資源。具體的目標(biāo)是：同一個(gè)URL，PC打開就顯示PC的那一套， M端打開就顯示Mobile的頁面。 create-react-app 腳手架本身不支持多入口，需要改造，今天下午研究了一下，改造了一波，基本達(dá)到了預(yù)期，在這里簡(jiǎn)單把經(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 <script> injected.
  new HtmlWebpackPlugin({
   inject: true,
   chunks: ["index"],
   template: paths.appHtml,
  }),

需要加多一個(gè)配置，改成：

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

每調(diào)一次HtmlWebpackPlugin生成一次HTML頁面，這里有兩個(gè)，所以就會(huì)多增加一個(gè)mobile.html節(jié)點(diǎn)。
chunks：指明哪些webpack入口的js會(huì)被注入到這個(gè)HTML頁面。如果不配置，則將所有entry的JS文件都注入HTML。
filename: 指明生成的HTML路徑，如果不配置就是dist/index.html。mobile配置了新的filename，避免與第一個(gè)入口相互覆蓋。
template：指定模版，我這里因?yàn)橛玫倪@兩個(gè)模版都一樣，所以就指定的同一個(gè)appHtml, 如有特殊需求，就新建一個(gè)html 文件，在template字段里引用即可。

Step4: 配置webpack Dev Server

上述配置做完后，理論就可以打包出多入口的版本；但使用npm start啟動(dòng)后，發(fā)現(xiàn)無論輸入/index.html還是/mobile.html，好像都是和原來/index.html顯示一樣的內(nèi)容。

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

這種現(xiàn)象，初步判斷是HTTP服務(wù)器把所有請(qǐng)求重定向到了/index.html。

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

參考官方文檔 The historyApiFallback option，發(fā)現(xiàn)是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,
 // 指明哪些路徑映射到哪個(gè)html
 rewrites: [
  { from: /^\/mobile.html/, to: '/dist/mobile.html' },
 ]
},

增加的rewrites節(jié)點(diǎn)，特別對(duì)/admin.html這個(gè)URL重定向?yàn)?dist/mobile.html頁面（也就是HtmlWebpackPlugin輸出的HTML文件路徑），這樣/mobile.html就可以正常訪問了。

至此，dev環(huán)境的多入口問題就解決了。

step5: Prod 環(huán)境配置

prod環(huán)境，比dev環(huán)境更簡(jiǎn)單。由于不存在webpack Dev Server，直接在config/webpack.config.prod.js同理做2和3步驟即可。

這時(shí)候你就可以通過手動(dòng)修改URl 來訪問了：