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://cdiso.cn/article/dsodhs.html

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

其他资讯