将create-react-app单页面SPA改造成多页面MPA

将create-react-app单页面SPA改造成多页面MPA

React推荐的脚手架 create-react-app (以下简称CRA) 默认创建的是单页面(SPA)应用，如果项目需要使用多页面(MPA)，则需要对脚手架进行更改

Tips: 以下配置基于 [email protected] 版本

举个栗子，比如我要将原来的index.html扩充出来一个iframe.html页面打包

1、eject 弹出配置

CRA把脚手架相关的配置给隐藏了，需要将配置给弹出

npm run eject

2、更改paths.js

将需要多页面化的html和js入口文件添加到paths中，可参考原有appHtml和appIndexJs即可

module.exports = {
  ...
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveModule(resolveApp, 'src/index'),

  // 多页面添加path部分
  iframeHtml: resolveApp('public/iframe.html'),
  appIframeJs: resolveModule(resolveApp, 'src/iframe/index'), // 路径可按需指定
    ...
};

3、更改webpack.config.js

更改entry入口

将原有的单entry入口的数组形式，更改成多chunk入口的对象形式

entry: {
  index: [
    isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs,
  ].filter(Boolean),
  iframe: [
    isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIframeJs,
  ].filter(Boolean),
}

更改output的filename

在开发模式，将打包的bundle.js加上对应包的chunkName

filename: isEnvProduction ? 'static/js/[name].[contenthash:8].js' : isEnvDevelopment && 'static/js/[name].bundle.js',

更改webpack的插件 ==HtmlWebpackPlugin== 选项

plugins: [
  // Generates an `index.html` file with the