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

背景

还是以前的项目。没多久就完成了国际化，还没来得及划桨，就有了新的工作——移动终端的兼容性。考虑到后期的复杂性，需要两套资源。具体目标是：对于同一个URL，打开PC时显示PC的设置，打开M终端时显示Mobile的页面。Create-react-app脚手架本身不支持多入口，需要改造。今天下午我们研究了一下，进行了改革，基本达到了预期。在这里，我们将简单分享一下经验。

渴望看到

Mobile:

PC:

与之前的index.html相比，输出文件多了一个mobile.html。

最终源代码目录：

具体改造步骤如下：

步伐

步骤1:弹出

使用上图中的create-react-app很方便。现在您需要更改配置并弹出默认配置：

在终端执行：退纱。

步骤2:修改网络包配置

原始webpack.config.dev.js:

entry :[require.resolve(' react-dev-utils/webpackHotDevClient ')，require . resolve('。/polyfills ')、require . resolve(' react-error-overlay ')、paths.appIndexJs、]、output : { path : path . appbuild、pathinfo: true、filename : ' static/js/bundle . js '、Chunk filename : ' static/js/[name]。chunk.js '，公共路径：公共路径，devtoolmodulefilename template 3360 info=path。解析(信息。absolutesourcepath)，需要修改为：

entry : { index :[require . resolve('。/polyfills ')、require . resolve(' react-dev-utils/webpackHotDevClient ')、paths.appIndexJs、]、mobile: [ require.resolve('。/polyfills ')、require . resolve(' react-dev-utils/webpackHotDevClient ')、path . appsrc '/mobile/index . js '，] }、output: { pathinfo: true、filename : ' static/js/[name]. bundle . js '、chunkfilename : ' static/js/[name]. chunk . js '，Public path : public path、devtoolmodlefilename template : info解析(信息。绝对资源)。替换(/\ \/g，'/')，}，一些可能需要注意的点：

条目从原始数组扩展到一个对象，每个键代表一个条目。为了区分输出名称和输出中的文件名，您可以添加[name]变量，该变量将根据条目编译每个条目的js文件。这样，您可以在src目录下创建一个新的私有目录，并开发一个新的SPA:

步骤3:生成多个html条目文件

配置多个门户后，Webpack只编译多个门户的Js，需要配置门户的HTML文件，可以通过HtmlWebpackPlugin生成。

webpack.config.dev.js的原始配置：

//generatesan `index.html `注入了脚本的文件. new html webpackkplugin({ inject : true，chunks: ['index']，template : path . app html，})，还需要添加一个配置，并更改为：

//使用注入的脚本生成一个“index.html”文件。新的Html webpackkplugin({ inject : true，chunks: ['index']，template : path . apphtml，})，新的HTML webpackkplugin({ inject : true，chunks: ['mobile']，template : path . apphtml，Filename: 'mobile.html '，})，每次调整HTML webpackkplugin时都会生成HTML页面，这里有两个页面，所以一个指示哪些webpack条目将被注入这个HTML页面。如果没有配置，条目的所有JS文件都会被注入到HTML中。文件名：表示生成的HTML路径，如果没有配置，则为dist/index.html。Mobile配置了新的文件名，以避免与第一个条目重叠。模板：指定模板。由于这里使用的两个模板是相同的，所以我将指定相同的appHtml。如果有特殊要求，只需创建一个新的html文件，并在模板字段中引用它。步骤4:配置网络包开发服务器

以上配置完成后，理论可以打包多入口版本；但是用npm start启动后发现，无论是输入/index.html还是/mobile.html，似乎内容都和原来的/index.html显示一样。

甚至很明显不存在的/xxxx.html也显示为/index.html的内容.

根据这种现象，HTTP服务器将所有请求重定向到/index.html.

对于单页应用来说，这是没有问题的(本来就是一个页面)，但是我们的new /mobile.html是可以访问的。

参考官方文档The historyApiFallback选项，发现是webpack dev服务器有问题，需要做一些额外的配置，需要修改webpackkdevserver . config . js:

原始配置：

historiyapifallback 3360 {//带点的路径仍应使用历史回退。//see https://github.com/脸书creator/create-react-app/issues/387 . disabledotportrule : true，}，修改为：

historyApiFallback: { //带点的路径仍应使用历史回退。//参见https://github.com/facebookincubator/create-react-app/issues/387。disableDotRule: true，///指示哪些路径映射到哪些HTML重写3360[{从：/\/mobile.html/，到：'/dist/mobile.html'}，]}，添加的重写节点，尤其是/admin的URL。将html重定向到/dist/mobile.html页面(即HtmlWebpackPlugin输出的HTML文件路径)，这样就可以正常访问/mobile.html了。

至此，开发环境的多入口问题得到了解决。

step5:产品的环境配置

产品环境比开发环境简单。没有webpack Dev Server，所以只需在config/webpack.config.prod.js中执行步骤2和3

此时，您可以通过手动修改URl来访问：

路线相关性

此时，您可以手动修改网址来访问电脑和手机的页面。还有一个问题没有解决：

最后，不得手动更改网址。你需要根据设备的情况来判断。这里有两个想法：

1:配置Nginx的路径时，添加别名映射。2:的前端是根据UA配置的。

为了快速达到效果，就简单的去做。具体代码如下：

这样就可以根据UA自动显示不同的页面，不需要手动修改URL，具体的渲染就是文章开头的偷窥。

其他的

以上路由只是为了简单效果，比较粗糙，仅供参考。

结论

这些都是细节，达到了预期的效果，但也有很大的优化空间。等到下一波需求完成，再加。希望对大家的学习有帮助，希望大家多多支持我们。