react 应用多入口 配置 && 实践总结

45次阅读

共计 3474 个字符,预计需要花费 9 分钟才能阅读完成。

背景
还是之前的那个项目,做完国际化没多久,还没来得及划水,又有新的活了 — 移动端的兼容。考虑到后期的复杂度,需要做两套资源。具体的目标是:同一个 URL,PC 打开就显示 PC 的那一套,M 端打开就显示 Mobile 的页面。create-react-app 脚手架本身不支持多入口,需要改造,今天下午研究了一下,改造了一波,基本达到了预期,在这里简单把经验总结分享下。
先睹为快
Mobile:

PC:

输出之后的文件,相比之前的 index.html,多了一个额外的 mobile.html.
最终的源代码目录:

具体的改造步骤如下:
Steps
step1: Eject
在下之前图方便,直接用了 create-react-app,现在需要更改配置,需要弹出默认配置:
在终端执行:yarn eject.
step2: 修改 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),
},

需要修改为:
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 原配置:
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
chunks: [“index”],
template: paths.appHtml,
}),

需要加多一个配置,改成:
// 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:
原配置:
historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebookincubator/create-react-app/issues/387.
disableDotRule: true,
},
修改为:
historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebookincubator/create-react-app/issues/387.
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: 配置 Engix 的路径的时候,加多一个 alias 的映射。2: 前端根据 UA 自行配置。
我这为了快速出效果,简单搞了一下,具体代码如下:

这样,不用手动修改 URL 也能根据 UA 自动显示不同的页面了, 具体的效果图在文章开头的先睹为快中。
其他
上面的路由就为了简单的出个效果,比较粗暴,仅供参考。
结语
以上就是全部的细节了,达到了预期的效果,但是也有很大优化空间。等后面一波需求做完了,再来做补充吧。:P
End。
参考资料:
https://medium.com/a-beginner…
http://imshuai.com/create-rea…

正文完
 0