最近由于项目需要,需要配置多入口编译,也就是一个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.*
好了 现在可以根据其他人的步骤做了
但是新版本的为什么就不行呢?可能是我没有搞懂,我也不说,不误人子弟了,哈哈!!