React工程如何实现多入口多SPA？

大家入门react想必都是从这行命令开始的吧!

npx create-react-app my-app

这个命令会生成一个工程骨架，小伙伴就可以愉快的板砖了。搬久了发现工程越来越大，一打包好几兆，严重影响加载速度。这时候就需要多入口打包，将工程分为几个小的SPA。比如登录时一个SPA，内容管理是一个SPA，产品管理是一个SPA，每个SPA加载共同的JS，和自己的JS，无关的不加载。我们就需要配置webpack来改造工程，结果发现项目里根本没有webpack.config.js。

React团队就像你妈一样为你做好了饭，你吃就好了。把webpack进行了封装，把你当傻瓜。

在package.json你会发现有个react-scripts包，打开源码就可以找到相见恨晚的webpack.config.js。但是我们不能直接修改这个文件，可以使用以下两种方法来对webpack进行配置。

第一种方式 eject

执行命令

yarn eject

把封装的配置脚本释放到当前工程里，在config目录下就有webpack.config.js了。此过程是不可逆的，你也将失去react-scripts未来升级能给你带来的好处。

第二种方式 craco

感谢社区提供第二种方案，让你的代码还可以继续保持纯洁的肉体。首先安装一下@craco/craco 这个包。

yarn add @craco/craco 

项目根目录下新建craco.config.js，在这个文件中覆盖默认的webpack.config即可。

craco.config.js如何配置请参阅文档：https://www.npmjs.com/package...
我们通过第二种方式实现多入口改造。改造思路：

1. 保留react-create-app默认的入口，入口名为main，js为src/index.js，使用模板public/index.html生成index.html
2. 为src/entries/下的每个子目录，创建一个同名的入口，入口js为src/entries/{entry-name}/index.js, 使用模板public/{entry-name}.html生成{entry-name}.html

按照这个思路我们需要把webpack config的entry项改为多入口，配置插件HtmlWebpackPlugin为每个entry生成对应的HTML。
其它要点：

• output.filename需要修改为按入口名生成bundle.js
• optimization.runtimeChunk需要修改为single 这样不同的入口会共用同一个runtime.js而不是每个生成一个
  废话不多说，直接放码！
• 默认webpack runtime代码会内嵌到HTML，可以在.env文件中设置INLINE_RUNTIME_CHUNK=false来禁用，或者通过代码删除InlineChunkHtmlPlugin

• devServerConfig.historyApiFallback中disableDotRule设置为true，要不然开发服务器会把/xxx.html的请求重定向到/xxx上，无法打开入口html

  const path = require('path');
  const fs = require('fs');
  const CracoLessPlugin = require('craco-less');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
  function configureWebpack(webpackConfig, {env, paths}) {
  const isEnvDevelopment = env === 'development';
  const isEnvProduction = env === 'production';
  //配置HtmlWebpackPlugin用来产生一个独立的HTML
  function mkHtmlWebpackPlugin(chunks, filename, template) {
      return new HtmlWebpackPlugin({
          inject: true,
          template: template || paths.appHtml,
          chunks,
          filename,
          ...isEnvProduction ? {
              minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
              }
          } : undefined
      });
  }
  
  //遍历src/entries为所有子目录创建一个webpack入口，并配置对应的HtmlWebpackPlugin
  const entriesDir = path.join(paths.appSrc, 'entries');
  const fileNames = fs.readdirSync(entriesDir);
  const entries = {};
  const htmlWebpackPlugins = [];
  fileNames.forEach(fileName => {
      const filePath = path.join(entriesDir, fileName);
      const file = fs.statSync(filePath);
      if(file.isDirectory()){
          entries[fileName] = path.join(filePath, "index.js");
          let template = path.join(paths.appPublic, fileName + ".html");
          if (!fs.existsSync(template))
              template = undefined;
  
          htmlWebpackPlugins.push(mkHtmlWebpackPlugin([fileName], fileName + ".html", template));
      }
  });
  
  //main为create-react-app默认创建的入口，保留下来。这样既可以实现原始的单入口，又可以实现多入口
  webpackConfig.entry = {
      main: webpackConfig.entry,
      ...entries
  };
  
  //覆盖默认的plugins配置
  const defaultHtmlWebpackPluginIndex = webpackConfig.plugins.findIndex(plugin => plugin instanceof HtmlWebpackPlugin);
  webpackConfig.plugins.splice(defaultHtmlWebpackPluginIndex, 1, mkHtmlWebpackPlugin(["main"], "index.html"), ...htmlWebpackPlugins);
  
  //create-react-app默认用的是一个固定文件名，不适合多入口！改为按入口名生成输出文件名
  if (isEnvDevelopment)
      webpackConfig.output.filename = 'static/js/[name].bundle.js';
  
  //共用runtime bundle
  webpackConfig.optimization.runtimeChunk = "single";
  
  // react-scripts默认在生产环境会将runtime chunk内嵌到html中
  // 禁用该行为，使用独立的js
  // 也可以在根目录新建.env文件，设置INLINE_RUNTIME_CHUNK=false来禁用
  // 不过配置入口太多了，不方便管理，直接这里用代码禁用好了
  const inlineChunkHtmlPluginIndex = webpackConfig.plugins.findIndex(plugin => plugin instanceof InlineChunkHtmlPlugin);
  if (inlineChunkHtmlPluginIndex >= 0)
      webpackConfig.plugins.slice(inlineChunkHtmlPluginIndex, 1);
  return webpackConfig;
  }
  function configureDevServer(devServerConfig, { env, paths, proxy, allowedHost }) {
  devServerConfig.historyApiFallback = {
      disableDotRule: true, //禁用，否则当访问/xxx.html时服务器会自动去掉.html重写url为/xxx
      index: paths.publicUrlOrPath,
      verbose: true,
  };
  return devServerConfig;
  }
  module.exports = {
  devServer: configureDevServer,
  webpack: {
      configure: configureWebpack,
  }
  };

通过上述代码即可完成多入口改造。具体实践代码可以参考
https://github.com/ikeyit/ike...
假设你有入口/src/entries/your-loved-mp4/index.js，访问
http://localhost:3000/your-lo...
即可打开该入口。

执行编译

yarn build

在build文件夹中可以看到生成了好多js，webpack会把共用和不共用的代码分到不同的包里。

执行命令分析Bundle Size

yarn analyze

(完)

欢迎关注作者的github项目，学习微服务：
一个支持多店铺的电商系统，基于Spring Boot的微服务构架
https://github.com/ikeyit/ike...
一个基于React的电商管理后台
https://github.com/ikeyit/ike...