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://bzwzjz.com/article/dsodhs.html