1.我覺得4個系統(tǒng)那就是要4個項目，每個項目都有自己的配置文件，這樣就每個系統(tǒng)都可以單獨打包，單獨上線
2.公用的components可以發(fā)布到npm或者內(nèi)部的私有庫，這樣就不同項目之間就可以共享，而不需要把所有的項目都耦合在一起

1L正解。

當(dāng)然是建立在你愿意建立這樣一個私有庫，然后開多個項目進(jìn)行管理。
如果你僅僅是一個人開發(fā)，然后不需要考慮后期維護(hù)的復(fù)雜性。那么可以接下去設(shè)計。

|-src
   |- Common 這里存放你的通用組件或者公用的其他東西
   |- Main Main 中直接用a標(biāo)簽實現(xiàn)就可以了，通過a標(biāo)簽調(diào)到其他4個系統(tǒng)
   |- A  認(rèn)為是一個項目
    |- index.js   這里是一個項目，該怎么寫怎么寫
    |- router
    |- redux
   |- B  認(rèn)為是一個項目
|-webpack.config.js

最后重頭就在打包上面了。
你需要打成5個包，每個站點上一個包。

首先Webpack3有一個新概念叫做
Exporting multiple configurations

可以導(dǎo)出這樣的形式

module.exports = [{
  output: {
    filename: './dist-amd.js',
    libraryTarget: 'amd'
  },
  entry: './app.js',
}, {
  output: {
    filename: './dist-commonjs.js',
    libraryTarget: 'commonjs'
  },
  entry: './app.js',
}]

你可以遍歷src下面的文件夾來進(jìn)行多個項目的打包。

nodejs讀取src文件夾.map((name) => {
  output: {
      filename: `.${name}/[name].js`,
  },
  entry: `./${name}.js`,
});

這是偽代碼，隨便寫的，大致思路