背景

創(chuàng)新互聯(lián)建站專注于良慶網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供良慶營銷型網(wǎng)站建設(shè)，良慶網(wǎng)站制作、良慶網(wǎng)頁設(shè)計、良慶網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造良慶網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供良慶網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

先睹為快

Mobile:

PC:

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

最終的源代碼目錄：

具體的改造步驟如下：

Steps

step1: Eject

在下之前圖方便， 直接用了create-react-app， 現(xià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),
},

網(wǎng)頁標(biāo)題：react應(yīng)用多入口配置及實踐總結(jié)-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://weahome.cn/article/dsodhs.html