react 应用多入口配置及实践总结
背景html
仍是以前的那个项目，作完国际化没多久，还没来得及划水， 又有新的活了 -- 移动端的兼容。 考虑到后期的复杂度， 须要作两套资源。 具体的目标是：同一个URL，PC打开就显示PC的那一套， M端打开就显示Mobile的页面。 create-react-app 脚手架自己不支持多入口， 须要改造，今天下午研究了一下，改造了一波， 基本达到了预期， 在这里简单把经验总结分享下。前端
先睹为快react
Mobile:webpack
PC:git
输出以后的文件， 相比以前的index.html， 多了一个额外的mobile.html.github
最终的源代码目录：web
具体的改造步骤以下：npm
Steps数组
step1: Eject服务器
在下以前图方便， 直接用了create-react-app， 如今须要更改配置， 须要弹出默认配置:
在终端执行：yarn eject.
step2: 修改webpack config
本来的 webpack.config.dev.js：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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),
},
|
须要修改成：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
entry: {
index: [
require.resolve(
'./polyfills'
),
require.resolve(
'react-dev-utils/webpackHotDevClient'
),
paths.appIndexJs,
],
mobile: [
require.resolve(
'./polyfills'
),
require.resolve(
'react-dev-utils/webpackHotDevClient'
),
paths.appSrc +
"/mobile/index.js"
,
]
},
output: {
pathinfo:
true
,
filename:
'static/js/[name].bundle.js'
,
chunkFilename:
'static/js/[name].chunk.js'
,
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g,
'/'
),
},
|
可能须要注意的几点：
- entry从原来的数组扩展为对象，每一个key表明一个入口。
- output中的filename要区分输出名，可增长[name]变量，这样会根据entry分别编译出每一个entry的js文件。
这样你就能够在src 目录下新起一个民目录开发新的SPA：
step3: 生成多个html入口文件
Webpack配置多入口后，只是编译出多个入口的Js，入口的HTML文件也须要配置， 能够用HtmlWebpackPlugin来生成。
webpack.config.dev.js 原配置：
|
1
2
3
4
5
6
|
// Generates an `index.html` file with the <script> injected.
new
HtmlWebpackPlugin({
inject:
true
,
chunks: [
"index"
],
template: paths.appHtml,
}),
|
须要加多一个配置， 改为：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// Generates an `index.html` file with the <script> injected.
new
HtmlWebpackPlugin({
inject:
true
,
chunks: [
"index"
],
template: paths.appHtml,
}),
new
HtmlWebpackPlugin({
inject:
true
,
chunks: [
"mobile"
],
template: paths.appHtml,
filename:
'mobile.html'
,
}),
|
- 每调一次HtmlWebpackPlugin生成一次HTML页面，这里有两个，因此就会多增长一个mobile.html节点。
- chunks： 指明哪些webpack入口的js会被注入到这个HTML页面。若是不配置，则将全部entry的JS文件都注入HTML。
- filename: 指明生成的HTML路径，若是不配置就是dist/index.html。mobile配置了新的filename，避免与第一个入口相互覆盖。
- template： 指定模版， 我这里由于用的这两个模版都同样， 因此就指定的同一个appHtml, 若有特殊需求， 就新建一个html 文件， 在template字段里引用便可。
Step4: 配置webpack Dev Server
上述配置作完后，理论就能够打包出多入口的版本；但使用npm start启动后，发现不管输入/index.html仍是/mobile.html，好像都是和原来/index.html显示同样的内容。
甚至输入显然不存在的/xxxx.html，也显示为/index.html的内容。
这种现象，初步判断是HTTP服务器把全部请求重定向到了/index.html。
对于单页应用，这种作法是没有问题的（原本就一个页面), 但咱们新增的/mobile.html就能够访问到了。
参考官方文档 The historyApiFallback option，发现是webpack dev server的问题，还要额外作一些配置，需修改webpackDevServer.config.js：
原配置：
|
1
2
3
4
5
|
historyApiFallback: {
// Paths with dots should still use the history fallback.
disableDotRule:
true
,
},
|
修改成：
|
1
2
3
4
5
6
7
8
9
|
historyApiFallback: {
// Paths with dots should still use the history fallback.
disableDotRule:
true
,
// 指明哪些路径映射到哪一个html
rewrites: [
{ from: /^\/mobile.html/, to:
'/dist/mobile.html'
},
]
},
|
增长的rewrites节点，特别对/admin.html这个URL重定向为/dist/mobile.html页面（也就是HtmlWebpackPlugin输出的HTML文件路径），这样/mobile.html就能够正常访问了。
至此，dev环境的多入口问题就解决了。
step5: Prod 环境配置
prod环境，比dev环境更简单。因为不存在webpack Dev Server，直接在config/webpack.config.prod.js同理作2和3步骤便可。
这时候你就能够经过手动修改URl 来访问了：
路由相关
到这， 已经能够手动修改URL 来访问pc 和 mobile的页面了。 还有一个问题没有解决：
URL最后确定是不能给你手动改来改去的， 须要根据设备的状况本身判断， 这里有两个思路：
1: 配置 Nginx 的路径的时候, 加多一个alias 的映射。
2: 前端根据UA自行配置。
为了快速出效果， 简单搞了一下， 具体代码以下：
这样， 不用手动修改URL 也能根据UA自动显示不一样的页面了, 具体的效果图在文章开头的先睹为快中。
其余
上面的路由就为了简单的出个效果， 比较粗暴， 仅供参考。
- 1. react 应用多入口配置及实践总结
- 2. react 应用多入口 配置 && 实践总结
- 3. react实践总结
- 4. webpack+es6+node+react初实践及总结
- 5. React+TypeScript+webpack4多入口配置
- 6. WebStrom使用实践配置总结
- 7. Docker应用实践总结
- 8. react Hooks 实践总结
- 9. react-redux实践总结
- 10. 小记：vue 及 react 的工程项目入口小结及 webpack 配置多页面应用参考
- 更多相关文章...
- • Spring Bean的配置及常用属性 - Spring教程
- • Thymeleaf项目实践 - Thymeleaf 教程
- • TiDB 在摩拜单车在线数据业务的应用和实践
- • 算法总结-滑动窗口
-
每一个你不满意的现在，都有一个你没有努力的曾经。