Webpack-dev-server: Multiple public path's

[cmodijk]

I'm using the i18n plugin which uses multiple exports. But the webpack-dev-server uses the options and public path from the first language and not all of them. Which means that al my other languages are not able to be loaded.

• https://github.com/webpack/webpack/tree/master/examples/i18n#webpackconfigjs
• https://github.com/webpack/webpack-dev-server/blob/master/bin/webpack-dev-server.js#L47-L49

My config

'use strict';

var path                = require('path');
var webpack             = require('webpack');
var I18nPlugin          = require('i18n-webpack-plugin');

var languages = {
    nl: null,
    en: null
};

module.exports = Object.keys(languages).map(function(language) {
    return {
        name: language,
        entry: {
            frontend:           './web/app/frontend/Application.js',
        },
        output: {
            path:           path.join(__dirname, 'web/builds/' + language),
            filename:       '[name].bundle.js',
            chunkFilename:  '[name].[id].chunk.js',
            publicPath:     '/builds/' + language + '/',
            pathinfo:       true
        },
        plugins: [
            new I18nPlugin(languages[language]),
            new webpack.optimize.DedupePlugin(),
            new webpack.optimize.CommonsChunkPlugin('vendor.js')
        ],
        resolve: {
            extensions: ['', '.js'],
            path:       __dirname,
            root:       __dirname
        }
    };
});

[cmodijk]

I have created my own binary which fixes my problem for know

var webpack             = require('webpack');
var WebpackDevServer    = require('webpack-dev-server');
var config              = require('./webpack.config');

new WebpackDevServer(webpack(config), {
    publicPath:         '/builds/',
    hot:                true,
    historyApiFallback: true
}).listen(8080, 'localhost', function (err) {
    if (err) {
        console.log(err);
    }

    console.log('Listening at localhost:8080');
});

[ksonnad]

I have the same problem, but don't see how @cmodijk's solution solves the issue.

It can be done fairly easily with webpack-dev-middleware, though.

var express = require('express');
var webpack = require('webpack');
var middleware = require('webpack-dev-middleware');

var configs = require('./webpack.config');
var app = express();

configs.forEach(function (config) {
  app.use(middleware(webpack(config), {
    publicPath: config.output.publicPath
  }));
});

var server = app.listen(5020);

[ywmail]

@ksonnad I have the same problem! Your solution works for me, saved my day!

[trsh]

@ywmail where did you put this code? I'm running the code like: webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/. Do not see webpack-dev-server at all in last example.

[ksonnad]

@trsh it's just a Node script that starts an Express server; you don't need to run it through Webpack. Put the code in a file and run node [filename].js.

[trsh]

@ksonnad that was probably addressed to me. Thanks! Will try tomorrow.

[trsh]

@ksonnad what if I have multiple html's by HtmlWebpackPlugin. How can I point from which to start and how to switch? Can you plz drop some ideas!

[ksonnad]

@trsh I don't use that plugin, so I can't speak to it specifically.

The idea of the code I posted above is that you can serve the output of different webpack configs at different paths. Here's a slightly clearer version:

server.js

var express = require('express');
var webpack = require('webpack');
var middleware = require('webpack-dev-middleware');

var config1 = require('./webpack1.config'); // publicPath = 'one'
var config2 = require('./webpack2.config'); // publicPath = 'two'
var configs = [config1, config2];

var app = express();

configs.forEach(function (config) {
  app.use(middleware(webpack(config), {
    publicPath: config.output.publicPath
  }));
});

var server = app.listen(5020);

Now you could access whatever you're generating in config1 at localhost:5020/one/ and config2 at localhost:5020/two/.

Perhaps you can achieve what you want by specifying different options for the HTML plugin in each config.

Disclaimer: I have no idea which versions this works with. I'm using webpack-1.13.0 and webpack-dev-middleware-1.2.0.

[trsh]

@ksonnad but how does app.use(middleware(webpack( choose the html? Sure it's a start point.

[ksonnad]

@trsh like I said, I don't use that plugin -- so not sure.

[ywmail]

Hi @trsh - I have multi webpack configs, so I followed @ksonnad 's solution, if you just have multi pages, you may have a look at https://webpack.github.io/docs/optimization.html#multi-page-app and https://github.com/ampedandwired/html-webpack-plugin#generating-multiple-html-files, you can handle multi pages with specific chucks or filter chucks.

[trsh]

@ywmail I understand that. The question is how webpack-dev-server will handle multi pages. Which one will be booted? index.html, test.html... etc. And how can I handle/controll that.

[ksonnad]

@trsh try it and see?

[nikibhatia]

Is it possible we have multiple applications and each applications having separate build using webpack so that we can deploy them individually when needed. .

Please anyone give some inputs .how we can do that.?

[VibhaniNikhil]

Any one know, How to manage two react app in single webpack-dev-config file?

[bruno-serfe]

@ksonnad Where exactly should be that configuration to handle multi apps? webpack.common.js? I'm using https://github.com/AngularClass/angular2-webpack-starter/

[shellscape]

Given the age the issue and the workarounds available, we're going to close this one.

[pptang]

For people who have two entry points using HtmlWebpackPlugin and still cannot make it work with webpack-dev-server configuration, I made use of devServer.proxy to work around it as follow:

const devConfig = {
  entry: {
    front: [path.join(__dirname, '../src/index.tsx')],
    'me/main': [path.join(__dirname, '../src/me.tsx')],
  },
  output: {
    path: path.join(__dirname, '../dist'),
    filename: '[name].[hash].bundle.js',
    publicPath: '/',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, '../index.html'),
      filename: 'index.html',
      chunks: ['runtime', 'react', 'front'],
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, '../index.html'),
      filename: 'me/index.html',
      chunks: ['runtime', 'react', 'me/main'],
    }),
    // ...other config
  ],
  devServer: {
    proxy: {
      '/*': {
        target: 'http://localhost:3010',
        bypass: (req) => {
          if (req.url.indexOf('/me') !== -1) {
            return '/me/index.html';
          }
          return '/index.html';
        },
      },
    },
    // If true, the index.html page will likely have to be served in place of any 404 responses
    historyApiFallback: true,
    publicPath: '/',
    host: 'localhost',
    port: 3010,
  },
};