create-react-app如何配置多页面

create-react-app可以快速生成脚手架，开发起来十分便利，但是只支持单页面的开发方式，如果有多页面开发的需求，就没有办法做到了。

因为create-react-app生成的脚手架也是使用webpack配置的，所以，我们也直接修改它的webpack配置，将其改为多页面的方式。

首先我们要获取webpack配置。这里，使用yarn eject弹出配置信息（需要注意的是，这个操作是不可逆的）。

运行后会多出一些目录和文件。

config目录下的webpack.config.js就是webpack的配置文件了。这里的内容比较多，找到entry配置信息，这表示webpack的打包入口，多页面配置只需要配置多个入口就可以了。

entry: {
  first: [
    paths.appFirstJs,
    isEnvDevelopment &&
      require.resolve("react-dev-utils/webpackHotDevClient")
  ].filter(Boolean),
  second: [
    paths.appSecondJs,
    isEnvDevelopment &&
      require.resolve("react-dev-utils/webpackHotDevClient")
  ].filter(Boolean),
  // other entries...
},

这里可以看到paths.appFirstJs和paths.appSecondJs，它表示入口文件地址，这些信息在paths.js中进行配置。在paths.js中，参照appIndexJs的配置，添加其他入口的配置即可。

// other configs...
appFirstJs: resolveModule(resolveApp, 'src/pages/first'),
appSecondJs: resolveModule(resolveApp, 'src/pages/second'),
// other configs...

到这里算是配置完成了，重新运行一下服务应该就是多页面的效果了，访问一下http://localhost:3000/first.html试试吧。