我有一个用 React.js（比如 CRM）制作的产品，我想将它分发给我的许多客户，但带有特定于客户的组件（覆盖常见的组件）。

主代码库的源文件夹结构如下所示：

...
/src
├── components
│   ├── Sidebar
│   ├── Navbar
│   ├── Buttons
│   ├── Chart
│   └── __tests__
├── containers
│   ├── About
│   ├── App
│   ├── Chat
│   ├── ...
├── helpers
├── redux
│       ...
├── theme
|       ...
└── vendor
...
/custom-src
├── clientA
│   ├── components
│   ├── containers
│   └── theme
└── clientB
    └── components


...

但是，每个客户都希望为他们的 CRM 定制设计的组件，例如 custom Navbar、 customSidebar等。+ 自定义 UI theme(CSS)。

我不想拥有多个代码库，但也不想为每个客户端分发相同的捆绑代码，其中还包括其他客户端的自定义组件。

假设我有clientA。他有一些定制的组件（覆盖了常见的组件）、定制的容器和特定的主题。到现在为止，我一直在使用 bash 脚本将/src文件夹与/custom-src/<client>文件夹合并，但这种方法对我来说似乎并不合适，而且我必须在工作目录之外创建临时文件夹，这不是很实用。

有人知道如何使用webpack来做到这一点，我已经用于代码捆绑了吗？

我当前的 webpack 配置如下所示：

{
    devtool: 'inline-source-map',
    context: path.resolve(__dirname, '..'),
    entry: {
        'main': [
            'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
            './src/theme/loader!./webpack/styles.js',
            'font-awesome-webpack!./src/theme/font-awesome.config.js',
            './src/client.js'
        ]
    },  
    output: {
        path: assetsPath,
        filename: '[name]-[hash].js',
        chunkFilename: '[name]-[chunkhash].js',
        publicPath: 'http://' + host + ':' + port + '/dist/'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']
            },
            {test: /\.json$/, loader: 'json-loader'},
            {
                test: /\.less$/,
                loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap'
            },
            {
                test: /\.scss$/,
                loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap'
            },
            {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
            {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"},
            {
                test: webpackIsomorphicToolsPlugin.regular_expression('images'),
                loader: 'url-loader?limit=10240&name=[hash:6].[ext]'
            }
        ]
    },
    progress: true,
    resolve: {
        modulesDirectories: [
            'src',
            'node_modules'
        ],
        extensions: ['', '.json', '.js', '.jsx']
    },
    plugins: [
        // hot reload
        new webpack.HotModuleReplacementPlugin(),
        new webpack.IgnorePlugin(/webpack-stats\.json$/),
        new webpack.DefinePlugin({
            __CLIENT__: true,
            __SERVER__: false,
            __DEVELOPMENT__: true
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        webpackIsomorphicToolsPlugin.development()
    ]
}