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

该文章由 leevare 发布于 ,归类于 Javascript

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.appFirstJspaths.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试试吧。

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒