脚本宝典收集整理的这篇文章主要介绍了react 应用多入口 配置 && 实践总结,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
背景
还是之前的那个项目,做完国际化没多久,还没来得及划水, 又有新的活了 -- 移动端的兼容。 考虑到后期的复杂度, 需要做两套资源。 具体的目标是:同一个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, '/'),
},
可能需要注意的几点:
这样你就可以在src
目录下新起一个民目录开发新的SPA:
steP3: 生成多个html入口文件
Webpack配置多入口后,只是编译出多个入口的Js,入口的HTML文件也需要配置, 可以用HtmlWebpackPlugin来生成。
webpack.config.dev.js
原配置: