react应用多入口配置及实践总结-创新互联

背景

创新互联建站专注于良庆网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供良庆营销型网站建设,良庆网站制作、良庆网页设计、良庆网站官网定制、微信小程序开发服务,打造良庆网络公司原创品牌,更为您提供良庆网站排名全网营销落地服务。

还是之前的那个项目,做完国际化没多久,还没来得及划水, 又有新的活了 -- 移动端的兼容。 考虑到后期的复杂度, 需要做两套资源。 具体的目标是:同一个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),
},

当前题目:react应用多入口配置及实践总结-创新互联
网站链接:http://ybzwz.com/article/dsodhs.html