后台还是之前的项目。国际化完成没多久，还没来得及划桨，又来了一个新工作——移动端兼容。考虑到后期的复杂性，需要制作两组资源。具体目标是：同一个URL，打开PC端显示PC版，打开M端显示Mobile页面。create-react-app脚手架本身不支持多入口，需要修改。今天下午研究过，修改过。基本达到了预期。这里简单总结一下经验分享给大家。先睹为快Mobile:PC:输出文件后，与之前的index.html相比，多了一个mobile.html。最终源码目录：具体改造步骤如下：Stepsstep1:Eject方便在下图create-react-app之前使用，现在需要更改配置，需要弹出默认配置：Executeinterminal:yarneject.step2:修改原来webpack.config.dev.js的webpackconfig:entry:[require.resolve('react-dev-utils/webpackHotDevClient'),require.resolve('./polyfills'),require.resolve('react-error-overlay'),paths.appIndexJs,],output:{path:paths.appBuild,pathinfo:true,文件名:'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",]},输出:{pathinfo:true,文件名：'static/js/[name].bundle.js'，chunkFilename：'static/js/[name].chunk.js'，publicPath：publicPath，devtoolModuleFilenameTemplate：info=>path.resolve(info.absoluteResourcePath)。replace(/\\/g,'/'),},一些可能需要注意的地方：条目从原来的数组扩展为一个对象，输出中每个key代表一个条目文件名。为了区分输出名称，可以添加[name]变量，这样每个入口的js文件都会根据入口分别编译。这样就可以在src目录下新建一个public目录来开发新的SPA：step3：生成多个html入口文件Webpack配置多个入口后，只编译多个入口Js，入口HTML文件也需要配置好后，就可以用HtmlWebpackPlugin生成了。webpack.config.dev.js原始配置：//生成一个注入了注入。newHtmlWebpackPlugin({inject:true,chunks:["index"],template:paths.appHtml,}),newHtmlWebpackPlugin({inject:true,chunks:["mobile"],模板:paths.appHtml,文件名:'mobile.html',}),每次调用HtmlWebpackPlugin生成HTML页面，这里有两个，所以会多加一个mobile.html节点。chunks：表示将哪个webpack入口js注入到这个html页面中。如果不配置，所有入口JS文件将被注入到HTML中。filename：表示生成的HTML路径，如果不配置则为dist/index.html。mobile配置了一个新的文件名，以避免与第一个条目相互覆盖。template：指定模板，因为我这里使用的两个模板是一样的，所以我指定的是同一个appHtml，如果有特殊需要，只需要新建一个html文件，在template字段中引用即可。Step4：配置webpackDevServer以上配置完成后，理论上就可以打包多入口版本了；但是用npmstart启动后，好像不管输入/index.html还是/mobile.html，好像都和原来的/index.html一样。html显示相同的内容。即使输入显然不存在的/xxxx.html，也会显示为/index.html的内容。对于这种现象，初步判断是HTTP服务器将所有请求重定向到/index.html。对于单页应用，这种方式是没有问题的（是一个页面），但是我们新添加的/mobile.html是可以访问的。参考官方文档historyApiFallback选项，发现是webpackdevserver的问题，需要额外做一些配置，需要修改webpackDevServer.config.js：原配置：historyApiFallback:{//带点的路径仍应使用历史回退。//带点的路径仍应使用历史回退。//请参阅https://github.com/facebookincubator/create-react-app/issues/387。disableDotRule:true,},修改为：historyApiFallback:{//带点的路径仍应使用历史回退。//参见https://github.com/facebookincubator/create-react-app/issues/387。disableDotRule:true,//表示哪些路径映射到哪些htmlrewrites:[{from:/^\/mobile.html/,to:'/dist/mobile.html'},]}，添加的rewrites节点，特别适合/admin.html这个网址被重定向到了/dist/mobile.html页面（也就是HtmlWebpackPlugin输出的HTML文件路径），所以/mobile.html就可以正常访问了。至此，dev环境的多入口问题就解决了。step5：prod环境配置prod环境，prod环境比dev环境简单。由于没有webpackDevServer，直接在config/webpack.config.prod.js中进行2、3步即可。这时候可以手动修改url访问：路由和这个有关，已经可以手动修改url访问pc和mobile页面了。还有一个问题没有解决：url最后肯定不是手动给你改的，需要你根据设备的情况自己判断。这里有两个思路：1：在配置Nginx的路径时，添加一个别名映射。2：前端根据UA自行配置。为了快速出效果，我简单做了一下。具体代码如下：这样就可以根据UA自动显示不同的页面，无需手动修改url。具体效果图在文章开头的预览中。以上其他路线为简单效果，比较粗糙，仅供参考。结论以上就是所有的细节，达到了预期的效果，但是还有很大的优化空间。等下一波需求完成，再做补充。:完。最后，如果觉得内容有帮助，可以关注我的公众号《前端e进阶》，掌握最新动态，共同学习成长！参考资料：https://medium.com/a-beginner...http://imshuai.com/create-rea...
