Настройка веб-пакета для создания двух отдельных реагирующих приложений для совместного использования кода

Question

У меня есть App1 и App2, работающие независимо друг от друга. Но я хочу, чтобы между App1 и App2 был общий каталог с общим кодом.

Я попытался создать корневой файл webpack.config.js, который будет выглядеть так:

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

module.exports = {
    entry: {
        app1: './src/App1/index.js',
        app2: './src/App2/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].index_bundle.js',
    },
    module: {
        rules: [
            { test: /\.(js)$/, use: 'babel-loader' },
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        ],
    },
    mode: 'development',
    devtool: 'inline-source-map',
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/App1/index.html',
            inject: true,
            chunks: ['app1']
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/App2/index.html',
            inject: true,
            chunks: ['app2']
        }),
    ],
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        hot: true,
        port: 3000,
        open: true,
    },
}

Все еще не удается построить ... Кто-нибудь знает почему? заранее спасибо.