react脚手架配置多编译入口TypeError:Cannot read property 'filter' of undefined

最近由于项目需要,需要配置多入口编译,也就是一个html对应一个js入口所以就去网上搜,大概都是这么个步骤

比如这个地址
配置多入口教程
1、create-react-app myapp
2、执行npm run eject 可以将webpack的配置文件暴露出来 ,
3、然后修改webpack的配置文件 入口entry多个。
这就是大致步骤
但是!! 我就是配置不成功,
配置了入口

entry:{
	index:'./src/index.js',
	admin:'./src/admin.js'
}

出现
TypeError:Cannot read property ‘filter’ of undefined
错误,于是我就开始研究。发现了报错位置

      new ManifestPlugin({
       。。。。。。
          const entrypointFiles = entrypoints.main.filter(
            fileName => !fileName.endsWith('.map')
          );
          。。。。。
        },
      }),

发现这里只能将入口设置为数组形式,

来看一看这个 react-scripts 是什么??
我们来package.json看一下这个eject是什么?发现

scripts:{
	'eject':react-scripts eject
}

react-scripts 是 create-react-app 的一个核心包,一些脚本和工具的默认配置都集成在里面,而 npm run eject 命令执行后会将封装在 create-react-app 中的配置全部反编译到当前项目,这样用户就能完全取得 webpack 文件的控制权。所以,eject 命令存在的意义就是更改 webpack 配置存在的啊!
去node_moudules下面找找发现了react-scripts的源码,
在这里插入图片描述
原来是因为配置不一样 网上的config文件夹里都是下图
在这里插入图片描述
发现是因为react-scripts版本的问题,react-scripts@3后不支持entry为对象,我也不知道为啥,希望有人解答。
但是eject操作是不可逆的 需要
1、重新创建个项目
2、降低版本

npm i --save react-scripts@1.*

好了 现在可以根据其他人的步骤做了

但是新版本的为什么就不行呢?可能是我没有搞懂,我也不说,不误人子弟了,哈哈!!

发布了14 篇原创文章 · 获赞 8 · 访问量 6135

猜你喜欢

转载自blog.csdn.net/KangTongShun/article/details/104380028