代码仓库：
1. 创建项目
- 使用create-react-app初始化一个项目。
npx create-react-app ProjectName --template typescript
- 将项目中无关（暂时用不到）的一些文件删除，并将引用这些文件的语句删除
Untitled.png
2. 多页面应用配置
2.1 弹出webpack配置
由于create-react-app隐藏了webpack配置，因此首先需要将该项目的webpack配置暴露出来。运行如下命令
npm run eject
💡 运行该命令之前需要将修改的代码提交到git！
2.2 创建多页面文件
假设该多页面应用程序包括前台展示页面和后台管理页面。则在src下创建两个文件夹home和admin分别对应两个页面
- src/home/index.tsx
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
<React.StrictMode>
<div>前台页面主入口</div>
</React.StrictMode>,
document.getElementById("root")
);
- src/admin/index.tsx
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
<React.StrictMode>
<div>后台页面主入口</div>
</React.StrictMode>,
document.getElementById("root")
);
然后对应这两个页面还需要创建对应的html模板
- public/index.html 对应前台展示页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>前台展示页面</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
- public/admin.html 对应前台展示页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>后台管理页面</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
进行上述一系列的操作后，文件结构如下图所示
Untitled (1).png
2.3 修改打包相关配置
- 首先修改文件路径映射
来到config/paths.js文件下，在module.exports中，修改appIndexJs的文件路径，添加adminHtml和adminIndexJs的文件路径
module.exports = {
dotenv: resolveApp('.env'),
appPath: resolveApp('.'),
appBuild: resolveApp(buildPath),
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/home/index'),
adminHtml: resolveApp('public/admin.html'),
adminIndexJs: resolveModule(resolveApp, 'src/admin/index'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
appTsConfig: resolveApp('tsconfig.json'),
appJsConfig: resolveApp('jsconfig.json'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
proxySetup: resolveApp('src/setupProxy.js'),
appNodeModules: resolveApp('node_modules'),
swSrc: resolveModule(resolveApp, 'src/service-worker'),
publicUrlOrPath
}
- 修改webpack中的配置
来到config/webpack.config.js文件中。
- 首先修改entry入口配置
entry: {
home: isEnvDevelopment && !shouldUseReactRefresh ? [ webpackDevClientEntry, paths.appIndexJs, ] : paths.appIndexJs,
admin: isEnvDevelopment && !shouldUseReactRefresh ? [ webpackDevClientEntry, paths.adminIndexJs ] : paths.adminIndexJs,
},
- 其次修改output出口配置
output: {
/** 其余代码不动 */
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/[name].bundle.js'
futureEmitAssets: true,
chunkFilename: isEnvProduction
? 'static/js/*[name].[contenthash:8].chunk.js*'
: isEnvDevelopment && 'static/js/[name].chunk.js',
},
- 最后修改plugin插件配置
plugins: [
/** 其余代码不动 */
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
chunks: ['home'],
template: paths.appHtml,
filename: 'index.html'
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
chunks: ['admin'],
template: paths.adminHtml,
filename: 'admin.html'
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
/** 注释掉ManifestPlugin插件配置 */
// new ManifestPlugin({
// fileName: 'asset-manifest.json',
// publicPath: paths.publicUrlOrPath,
// generate: (seed, files, entrypoints) => {
// const manifestFiles = files.reduce((manifest, file) => {
// manifest[file.name] = file.path;
// return manifest;
// }, seed);
// const entrypointFiles = entrypoints.main.filter(
// fileName => !fileName.endsWith('.map')
// );
// return {
// files: manifestFiles,
// entrypoints: entrypointFiles,
// };
// },
// }),
]
💡 HtmlWebpackPlugin这个plugin曝光率很高，他主要有两个作用: （1）为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题；（2）可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
2.4 修改启动脚本配置
在启动脚本代码里，他会检查html模板文件、多页面的入口文件的路径映射是否存在。由于修改了路径映射文件，因此也需要对启动脚本代码进行修改。
分别来到scripts/build.js和scripts/start.js文件。找到如下代码并进行修改。
// 修改前的代码
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
// 修改后的代码
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs, paths.adminHtml, paths.adminIndexJs])) {
process.exit(1);
}
至此，多页面的相关配置已修改完毕。
3. 多页面结果查看
3.1 查看页面
运行如下命令，重新启动项目
npm start
在控制台输入localhost:3000（或localhost:3000/index.html），页面展示的结果如下所示：
Untitled (2).png
在控制台输入localhost:3000/admin.html，页面展示的结果如下所示：
Untitled (3).png
页面结果符合预期
3.2 总结
配置多页面应用的步骤如下：
- 在public下创建多个html模板，每个html模板对应一个页面应用。如果页面模板没有差别的话，可以只创建一个；
- 在src下新建多个文件夹，每个文件夹对应一个页面应用。在每个文件夹下建立一个index.tsx作为该页面应用的入口文件，在该文件中，将react挂载到html模板中的根节点中去；
- 修改config/paths.js文件下的路径映射，将多页面的html模板和入口文件添加到路径映射中去；
- 配置webpack的entry，为每个多页面应用起个名字作为key，将入口文件作为value；
- 配置webpack的output，将打包后的文件名改为
[name].bundle.js，其中name为entry中的key； - 配置webpack的plugin，有多少个页面应用就创建多少个HtmlWebpackPlugin，并对其配置对应的html模板和打包后的文件名（即entry中的key）
- 修改scripts目录下的文件。更改校验文件是否存在的代码，将paths.js中新增的路径映射添加到判断条件中
- 重启项目，检查结果。
