react 应用多入口配置及实践总结

React应用多入口配置实践：长沙网络推广经验分享

背景介绍：

在前不久的一个项目中，我们完成了国际化设置后，又迎来了新的挑战——移动端的兼容性。为了确保后期的维护和管理更为便捷，我们决定为PC和移动端分别提供两套资源。我们的目标是实现同一个URL，在PC端打开显示PC端的页面，而在移动端打开则显示相应的移动页面。create-react-app脚手架默认并不支持多入口配置，需要我们进行改造。今天，我将结合长沙网络推广的经验，为大家分享这一实践。

预览体验：

让我们先来看看改造后的效果。在Mobile端访问时，你将看到的是专为移动设备优化的页面；而在PC端访问时，你将看到的是适合桌面设备的页面。这一改变的实现，除了原有的index.html文件外，还多了一个mobile.html文件。

改造步骤：

第一步：弹出默认配置（Eject）

由于之前为了方便，我们直接使用了create-react-app。现在为了更改配置，我们需要弹出默认配置。在终端执行yarn eject命令即可。

第二步：修改Webpack配置

在项目的src目录下，你想要开启一个新的民目录来开发一个新的单页面应用（SPA）。这个过程就像是一片未知的领域，充满了无限可能。

第三步，我们要生成多个html入口文件。在Webpack配置多个入口之后，不仅仅是编译出多个入口的Js文件，我们还需要配置入口的HTML文件。这时，HtmlWebpackPlugin就派上了用场。它可以帮我们生成HTML文件。

让我们看一下webpack的配置文件webpack.config.dev.js。原本，我们只有一个HtmlWebpackPlugin的配置，用于生成一个带有脚本注入的index.html文件。而现在，我们要在此基础上进行一些改动。

我们需要添加一个新的HtmlWebpackPlugin配置，专门用于生成mobile.html文件。每次调用HtmlWebpackPlugin都会生成一个HTML页面，所以我们这里有两个配置，就会生成两个HTML页面：一个是index.html，另一个是mobile.html。

在chunks字段中，我们指定哪些webpack入口的js会被注入到这个HTML页面。如果不进行配置，那么所有entry的JS文件都会被注入到HTML中。而通过指定chunks，我们可以精确控制哪些JS文件需要被注入。

filename字段用于指定生成的HTML文件的路径。如果不进行配置，默认路径会是dist/index.html。因为我们为mobile配置了新的filename，所以可以避免与第一个入口的文件名冲突。

template字段用于指定模板。在这里，由于两个入口使用的模板是一样的，所以我们指定了同一个appHtml。如果有特殊需求，可以新建一个html文件并在template字段中引用。

第四步是配置webpack Dev Server。完成上述配置后，理论上我们就可以打包出多入口的版本了。当我们使用npm start启动后，无论输入/index.html还是/mobile.html，显示的内容似乎都是和原来一样的。甚至输入不存在的/.html，也显示为/index.html的内容。

这种情况很可能是因为HTTP服务器将所有请求都重定向到了/index.html。对于单页应用来说，这种做法没有问题，因为本来就只有一个页面。我们新增的/mobile.html却无法正常访问了。为了解决这个问题，我们还需要对webpack Dev Server进行进一步的配置。

经过一番深入，我发现了问题的根源在于webpack dev server的historyApiFallback选项。为了解决这个问题，我必须对webpackDevServer.config.js进行额外的配置。

原配置

原先的historyApiFallback配置是这样的：

```javascript

historyApiFallback: {

// 即便路径中包含点，也应当使用历史回退

// 关于详细情况，请参见

disableDotRule: true,

}

```

这段配置确保了webpack dev server在处理含有点的路径时，仍然能够利用历史API回退功能。这是一个关键的配置，对于开发环境下的URL路由至关重要。

配置升级

在此基础上，我进行了配置的升级：

```javascript

historyApiFallback: {

// 保留原有的disableDotRule配置，确保含有点的路径也能正常使用历史回退功能。

disableDotRule: true,

// 新增rewrites节点，用于指定哪些路径映射到哪个HTML文件。

rewrites: [

{

from: /^\/mobile.html$/,

to: '/dist/mobile.html'

},

]

}

```

这段新增的rewrites配置特别针对/admin.html这个URL进行了重定向，将其映射到/dist/mobile.html页面（也就是HtmlWebpackPlugin输出的HTML文件路径）。这样一来，通过简单的URL访问即可加载相应的页面。这一改动成功解决了开发环境下多入口的问题。

生产环境配置简述

生产环境的配置相对简单。由于不存在webpack Dev Server，只需在config/webpack.config.prod.js中进行相应的配置即可。完成这一步后，你就可以通过手动修改URL来访问不同的页面了。

路由问题与对策

虽然手动修改URL可以访问不同的页面，但真正的应用环境中，URL的路由应当自动根据设备或用户代理（UA）进行判断和映射。为此，提供了两种思路：一是在Nginx的路径配置中添加别名映射，二是前端根据UA自行配置。为了快速实现效果，我们选择了简单的前端UA判断方式。这样一来，无需手动修改URL，系统即可根据UA自动显示相应的页面。这一部分的实现仅供参考，可以根据实际需要进行优化和调整。

结语与展望

以上就是解决该问题的全部细节。通过优化配置和调整，成功实现了预期的效果。还有很多优化空间等待我们去发掘。后续随着需求的更迭，我们将进一步完善和优化这些配置。希望这些内容能对大家的学习有所帮助，也希望大家能够关注和支持我们的工作。未来我们会带来更多实用的技术分享和学习资源。狼蚁SEO与您一同成长！