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
试试吧。
- 本博客所有文章除特别声明外,均可转载和分享,转载请注明出处!
- 本文地址:https://www.leevii.com/?p=2391
您好 我的entry配置完 执行npm run build 会报错, Cannot read property ‘filter’ of undefined, 你有这种情况吗?
你可以参照着示例看下:https://github.com/DulJuly/react-multiple-pages-demo
好的 感谢