修改create-react-app支持多入口
使用Facebook官方脚手架create-react-app创建React应用,默认只能生成一个SPA,入口是index.html。虽然,SPA的页面切换可以使用前台路由框架方便(比如React-Router)实现,这也是SPA的推荐做法;但某些情况下,仍要将页面切分为多个页面,或者在同一个工程开发多个SPA,比如一个是面向客户的SPA,一个是后台管理的SPA。
官方给出的回答是:
Sorry, but Create React App doesn't support this use case.
You can eject and then configure Webpack to have multiple entry points.
查阅create-react-app和webpack官方文档,测试如下方式可行,步骤如下:(假设在默认的index.html外增加一个admin.html)
1. Eject
要实现自定义配置,就需要先Eject出配置(此步骤对create-react-app工程不可逆):npm run eject
运行后,package.js会被更新,工程下会多出config目录,其中有webpack有两个配置文件,分别对应开发和生产环境(/config/webpack.config.dev.js和/config/webpack.config.prod.js)。这两个配置文件都要修改,但略有不同,下面以dev为例说明:
2. 修改webpack配置支持多入口
由于是使用webpack打包,先要让webpack配置出多入口。/config/webpack.config.dev.js默认配置的入口如下:
entry: [
require.resolve('react-dev-utils/webpackHotDevClient'),
require.resolve('./polyfills'),
require.resolve('react-error-overlay'),
paths.appIndexJs,
],
output: {
path: paths.appBuild,
pathinfo: true,
filename: 'static/js/bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath),
},
根据webpack官方文档MULTIPLE ENTRY POINTS,可做如下修改:
要点是:
- entry从原来的数组扩展为对象,每个key代表一个入口。
- output中的filename要区分输出名,可增加[name]变量,这样会根据entry分别编译出每个entry的js文件。
- 由于
path
里面没有定义新的entry的路径,图方便可以直接写死为paths.appSrc + "/admin.js"
entry: {
index: [
require.resolve('react-dev-utils/webpackHotDevClient'),
require.resolve('./polyfills'),
require.resolve('react-error-overlay'),
paths.appIndexJs,
],
admin:[
require.resolve('react-dev-utils/webpackHotDevClient'),
require.resolve('./polyfills'),
require.resolve('react-error-overlay'),
paths.appSrc + "/admin.js",
]
},
output: {
path: paths.appBuild,
pathinfo: true,
filename: 'static/js/[name].bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath),
},
这样在src文件夹下,就可以再增加一个admin.js的入口,单独写新的SPA。
普通的webpack打包工程,到此即可实现多入口,但create-react-app流程更复杂,需继续修改。
3. 修改HtmlWebpackPlugin生成多个HTML
Webpack配置多入口后,只是编译出多个入口的JS,同时入口的HTML文件由HtmlWebpackPlugin生成,也需做配置。
原配置如下:
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
修改为:
new HtmlWebpackPlugin({
inject: true,
chunks: ["index"],
template: paths.appHtml,
}),
new HtmlWebpackPlugin({
inject: true,
chunks: ["admin"],
template: paths.appHtml,
filename: 'admin.html',
}),
每调一次HtmlWebpackPlugin生成一次HTML页面,故为admin.html多增加一个节点。其他要点如下:
chunks
,指明哪些webpack入口的JS会被注入到这个HTML页面。如果不配置,则将所有entry的JS文件都注入HTML。filename
,指明生成的HTML路径,如果不配置就是build/index.html,admin配置了新的filename,避免与第一个入口的index.html相互覆盖。
另外,template
属性也可以修改为不同的HTML模板,这里的例子,我么就和index入口共用HTML模板了。
4. 修改webpack Dev Server配置
上述配置做完后,理论就可以打包出多入口的版本;但使用npm start
启动后,发现无论输入/index.html还是/admin.html,好像都是和原来/index.html显示一样的内容。甚至输入显然不存在的/xxxx.html,也显示为/index.html的内容。
这种现象,初步判断是HTTP服务器把所有请求重定向到了/index.html。对于单页应用,这种做法是没有问题的(本来就一个页面);但我们新增的/admin.html就可以访问了。
参考官方文档The historyApiFallback option,发现是webpack dev server的问题,还要额外做一些配置,需修改/config/webpackDevServer.config.js。
原配置如下:
historyApiFallback: {
disableDotRule: true,
},
修改为:
historyApiFallback: {
disableDotRule: true,
// 指明哪些路径映射到哪个html
rewrites: [
{ from: /^\/admin.html/, to: '/build/admin.html' },
]
}
增加的rewrites节点,特别对/admin.html这个URL重定向为/build/admin.html页面(也就是HtmlWebpackPlugin输出的HTML文件路径),这样/admin.html就可以正常访问了。
至此,dev环境的多入口问题就解决了。
prod环境
prod环境,比dev环境更简单。由于不存在webpack Dev Server,直接在config/webpack.config.prod.js同理做2和3步骤即可。
使用npm run build
构建prod版本,观察build目录,入口/admin.html的html、js和css文件俱在:
build
├── admin.html
├── asset-manifest.json
├── favicon.ico
├── index.html
├── manifest.json
├── service-worker.js
└── static
├── css
│ ├── admin.d41d8cd9.css
│ ├── admin.d41d8cd9.css.map
│ ├── index.9a0fe4f1.css
│ └── index.9a0fe4f1.css.map
├── js
│ ├── admin.f3dca2cd.js
│ ├── admin.f3dca2cd.js.map
│ ├── index.4b87195c.js
│ └── index.4b87195c.js.map
└── media
└── logo.5d5d9eef.svg
修改create-react-app支持多入口的更多相关文章
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
- [React] Use the Fragment Short Syntax in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...
- [React] {svg, css module, sass} support in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr ...
- create react app 项目部署在Spring(Tomcat)项目中
网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...
随机推荐
- JS(JavaScript)的进一步了解1(更新中···)
1.作用域链 作用域:浏览器给JS的一个生存环境(栈内存). 作用域链:JS中的关键字var 和function 都可以提前声明和定义.提前声明和定义的内容放在我们的 内存地址(堆内存)中.然后JS从 ...
- 【做题】SRM704 Div1 Median - ModEquation——数论
原文链接 https://www.cnblogs.com/cly-none/p/SRM704Div1B.html 给出\(n\)和模数\(P\).\(q\)次询问,每次给出一个\([0,P-1]\)范 ...
- VMware15 安装centos7标准板
VM主页——>创建虚拟机——>典型——>下一步: 选择安装安装操作系统,进入选择客户机操作系统界面 选择Linux 版本centos7 64位: 下一步——>填写虚拟机名称, ...
- vue安装之后的报错处理---chromedriver@2.35.0 install: `node install.js`
报错:chromedriver@2.35.0 install: `node install.js` 这个错误的解决方法就是在你创建的项目目录,比如你创建的项目叫myVue,然后你就要在myVue这个目 ...
- Netty官网首页(翻译)
官网:https://netty.io/ Netty是一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端. Netty是一个NIO客户端服务器框架,可以快速轻松地开发协议 ...
- python-作用域解析
局部作用域和全局作用域:局部作用域不能修改全局作用域的变量 count = 10 def outer(): #global count 局部变量改成全局变量,global声明一下即可.就可以修改了. ...
- sentinel详解
https://segmentfault.com/a/1190000002680804 sentinel端口 port #工作路径 dir "/usr/local/redis-6380&qu ...
- python 字典 dict 该注意的一些操作
在用python处理dict 的时候,有几个该注意的地方,这里跟大家提一下: 1)操作dict 时,尽量少产生新的列表对象.比如: 遍历dict的时候,如果用 dic = {"a" ...
- http请求requestUtils
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...
- java中JScrollPane不显示水平滚动条的解决办法
在JPanel中添加了表格,表格中对东西太多,需要水平滚动条滑动才能够完全找到所有数据,如果没有水平滚动条的话,数据堆积在一起,无法分开 做法是: 第一步:先将表格自动调整的状态给关闭掉:table. ...