合并两个React应用：基于Create React App默认Webpack的需求

我来给你分享一个靠谱的方案，完美适配你的需求——共享同一个package.json和依赖，同时让两个应用的代码、配置完全独立，基于Create React App的默认配置改造就行，不用太复杂的操作：

一、先调整项目目录结构 #

首先把两个应用的代码规整到同一个根项目下，目录结构建议这样：

your-root-project/
├── public/
│   ├── app1/
│   │   ├── index.html
│   │   ├── favicon.ico
│   │   └── ...（App1原public下的所有文件）
│   └── app2/
│       ├── index.html
│       ├── favicon.ico
│       └── ...（App2原public下的所有文件）
├── src/
│   ├── app1/
│   │   ├── index.js
│   │   ├── App.js
│   │   ├── components/
│   │   └── ...（App1原src下的所有文件）
│   ├── app2/
│   │   ├── index.js
│   │   ├── App.js
│   │   ├── components/
│   │   └── ...（App2原src下的所有文件）
│   └── shared/ （可选，放两个应用共享的组件、工具类）
│       ├── Button.js
│       └── utils.js
├── package.json
└── craco.config.js （后面会用到，用来修改CRA的webpack配置）

把原来两个App的src和public内容分别移到对应的子文件夹里，根目录保留一个统一的package.json。

二、合并依赖到根目录的package.json #

1. 把App1和App2各自package.json里的dependencies和devDependencies合并到根目录的package.json里，去掉重复的依赖项（比如两个应用都有react、react-dom，只保留一份最新版本就行）。
2. 删除原来两个App各自的package.json，然后在根目录执行npm install（或者yarn install），安装所有共享依赖。

三、用Craco修改Webpack配置（核心步骤） #

因为Create React App默认不暴露Webpack配置，我们用craco（Create React App Configuration Override）来安全地修改配置，不用执行不可逆的eject命令：

1. 先安装craco：

npm install @craco/craco --save-dev

2. 在根目录创建craco.config.js，添加以下配置，实现多入口、多HTML模板的支持：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  webpack: {
    // 配置两个应用的入口文件
    entry: {
      app1: './src/app1/index.js',
      app2: './src/app2/index.js'
    },
    // 配置输出文件名，区分两个应用的打包产物
    output: {
      filename: 'static/js/[name].[contenthash:8].js'
    },
    // 配置HTML插件，每个应用对应自己的HTML模板
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/app1/index.html',
        filename: 'app1.html',
        chunks: ['app1'], // 只引入app1的打包文件
        inject: true
      }),
      new HtmlWebpackPlugin({
        template: './public/app2/index.html',
        filename: 'app2.html',
        chunks: ['app2'], // 只引入app2的打包文件
        inject: true
      })
    ]
  },
  devServer: {
    // 开发服务器允许访问两个HTML文件
    static: {
      directory: './public'
    }
  }
};

四、修改启动和打包脚本 #

在根目录的package.json里修改scripts字段，替换成craco的命令：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

如果需要单独打包某个应用，可以额外加两个脚本：

"build:app1": "craco build --env app=app1",
"build:app2": "craco build --env app=app2"

（需要在craco.config.js里加一点逻辑判断环境变量，只打包指定应用，这个可以根据需求自行扩展）

五、验证功能 #

1. 执行npm start启动开发服务器，访问http://localhost:3000/app1.html和http://localhost:3000/app2.html，两个应用应该都能正常运行，各自的代码、样式互不干扰。
2. 执行npm run build，打包后的产物会在build文件夹里，包含app1.html、app2.html以及对应的js、css文件，完全区分开。

额外小贴士 #

• 如果两个应用有共享的组件、工具类，直接放在src/shared文件夹里，两个应用都可以按需引入，不影响各自的独立结构。
• 每个应用可以有自己的环境变量，比如创建.env.app1和.env.app2，在craco配置里根据启动命令加载对应的环境变量。

内容的提问来源于stack exchange，提问作者Rakesh Chouhan