create react app配置多页面应用

最新推荐文章于 2024-09-01 08:28:44 发布

明明很开心_l

最新推荐文章于 2024-09-01 08:28:44 发布

阅读量1.6k

点赞数

分类专栏： react webpack 文章标签： react

本文链接：https://blog.csdn.net/qq_38036198/article/details/111251416

版权

本文记录了如何将Create React App设置为多页面应用的过程，包括准备工作、配置Webpack的entry和output、使用HtmlWebpackPlugin、处理ManifestPlugin以及解决启动和构建时的错误。通过理解Webpack配置和需求，逐步解决多页面应用的配置问题。

摘要由CSDN通过智能技术生成

最近在配置react的多页面应用，在此记录下来。

准备工作

首先根据create react app官网新建应用：

npm install -g create-react-app
npx create-react-app my-app
cd my-app
npm start

这时我们就初始新建了一个react基本应用了。

将应用配置打开

由于我们需要自定义一些webpack配置，先把原来脚手架的配置提取出来。

npm run eject

这时我们的package.json以及目录会有所改变多出了scripts文件夹和config文件夹。

更改目录

我们需要构建多页面应用，首先将src目录下，新建一个pages目录，下面再新建你的多页面文件例如：
在这里插入图片描述
这里我把原来src下的首页文件拷贝转进index和login下，这样就成了两个页面应用入口。

开始配置

目录更改后，我们清楚
1.pages目录下以后我们新建的页面都会在下面对应增加文件。
2.且入口都为新建页面下的index,js。
逻辑上我们应该需要在webpack下配置entry和output配置项。

我们先来配置entry和output
在config目录下的webpack.config.js文件找到entry选项，我们可以看到它只有一个入口为paths.appIndexJs，我们找到paths是在paths.js下定义的，所以我们需要将这个appIndexJs单项改为一个数组，包含我们src/pages目录下的所有文件下的index.js。
这时我们要遍历pages生成这个数组。
现在我们在paths.js做操作：

//这里获取所有的入口文件生成对象对应所有的路径
function getEntries(globPath) {
   
  const files = glob.sync(globPath),
    entries = {
   };
  files.forEach(function(filepath) {
   
    const split = filepath.split('/');
    const name = split[split.length - 2];
    entries[name] = './' + filepath;
  });
  return entries;
}
const entries = getEntries('src/pages/**/index.js');

//这里将入口对象转为路径数组
function getIndexJs() {
   
  const indexJsList = [];
  Object.keys(entries).forEach