Multicompiler with multiple output paths breaks WDS

Moved from https://github.com/webpack/webpack/issues/3091 - by @drphelps:

I’m submitting a feature request

Webpack version: 2.x

Please tell us about your environment: OSX 10.x

Current behavior: Currently, a Multicompiler instance with a different output.path specified for each config will boil the outputPath property down to a “common” path. I’m referring to this block of code https://github.com/webpack/webpack/blob/547295ca0e91dd5bb2c446e2df19c887c6aa053c/lib/MultiCompiler.js#L51-L63. This breaks WDS filename resolution.

Expected/desired behavior: WDS should serve resources from both paths or at least offer the ability to choose the first/preferred output.path when constructing the filename. I need to be able to output my files to separate (not necessarily nested) directories without breaking resolution.

• What is the motivation / use case for changing the behavior? In my setup, I am trying to build two separate apps in parallel and I need to be able to share resources between the two, including async modules. Consider the following config:

module.exports = [
  {
    context: __dirname,
    entry: "./app.js",
    output: {
      filename: "app.js",
      path: path.resolve(__dirname, './app/dist'),
      publicPath: '/static/javascript/dist/'
    },
    ...
  },
  {
    context: __dirname,
    entry: "./widget.js",
    output: {
      filename: "widget.js",
      path: path.resolve(__dirname, './widget/dist'),
      publicPath: '/widget/dist/'
    },
    ...
  }
]

[akinnee]

Any update on this?

[ywmail]

part of the code:

server.js

const telcoConfig = require('./config/webpack.dev')({ env: 'development', app: 'telco' });
const marketplaceConfig = require('./config/webpack.dev')({ env: 'development', app: 'marketplace' });

webpack.dev.js

const hotMiddlewareScript = 'webpack-hot-middleware/client?path=__webpack_hmr&timeout=20000&reload=true&dynamicPublicPath=true';

    return webpackMerge(commonConfig({ env: ENV, app: app }), {

        entry: {

            'polyfills': ['./src/' + app + '/polyfills.browser.ts', hotMiddlewareScript],
            'vendor': ['./src/' + app + '/vendor.browser.ts', hotMiddlewareScript],
            'main': ['./src/' + app + '/main.browser.ts', hotMiddlewareScript]

        },

        devtool: 'cheap-module-source-map',

        output: {

            path: helpers.root('dist/' + app),

            publicPath: '/' + app + '/',

            filename: '[name].bundle.js',

            sourceMapFilename: '[name].map',

            chunkFilename: '[id].chunk.js',

            library: 'ac_[name]',
            libraryTarget: 'var',
        },

        plugins: [
        ],

    })