react webpack多入口应用项目配置

背景：目前前端主流的框架例如react、vue大多用于进行单页面开发，但是随着项目的不断扩大，如果每做一个项目都搭建一个框架有点过于浪费资源，或者在对公司的老项目进行迭代开发的时候整体架构需要做一些改善（比如很多早期的项目都是原生js或者jq写的 而且还存在还多前后端不分离的项目），在原有的项目上进行增加新的功能也会增加开发成本并且使得项目难以维护。本文章主要讲解在react项目中配置多页面多入口案例。
1.使用react官方提供的脚手架工具进行搭建项目

create-react-app react-app
2.项目生成以后进入到文件夹 启动项目
npm start(默认启动端口为3000可以修改scripts目录下的start.js文件 更改端口号)
3.默认生成的项目中是不包含webpack配置的，可以通过eject命令将webpack配置暴露出来，不过这一步操作是不可逆的(如果在eject的过程中一直卡住不动 可以停止 然后将项目中的node_modules依赖包整体删除掉 重新安装依赖即可 npm install)
npm run eject
eject完成后的项目目录为

4.修改config目录下的webpack配置文件
a.修改入口配置paths.js

b.修改webpack打包的入口文件，entry默认是个数组，只有一个入口，现在要匹配多入口将entry更改为对象

c.修改webpack打包的出口文件，实现按需引入，每个小模块引入当前模块的css文件和js文件，打包出口增加/name/区分各个模块

d.修改生成的html模板插件HtmlWebpackPlugin

e.修改webpackDevServer.config.js historyApiFallback属性(指明哪个路径映射到哪个html)

修改完成之后重新启动项目便可访问各个入口的页面
localhost:3000/brainpower.html
localhost:3000/datathink.html
PS:等后期时间空闲把各个模块的路由配置好之后会将代码上传至gitlab以供参考