十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
背景
创新互联建站专注于良庆网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供良庆营销型网站建设,良庆网站制作、良庆网页设计、良庆网站官网定制、微信小程序开发服务,打造良庆网络公司原创品牌,更为您提供良庆网站排名全网营销落地服务。还是之前的那个项目,做完国际化没多久,还没来得及划水, 又有新的活了 -- 移动端的兼容。 考虑到后期的复杂度, 需要做两套资源。 具体的目标是:同一个URL,PC打开就显示PC的那一套, M端打开就显示Mobile的页面
。 create-react-app 脚手架本身不支持多入口, 需要改造,今天下午研究了一下,改造了一波, 基本达到了预期, 在这里简单把经验总结分享下。
先睹为快
Mobile:
PC:
输出之后的文件, 相比之前的index.html, 多了一个额外的mobile.html.
最终的源代码目录:
具体的改造步骤如下:
Steps
step1: Eject
在下之前图方便, 直接用了create-react-app
, 现在需要更改配置, 需要弹出默认配置:
在终端执行: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), },