How do you use inline mode with the webpack-dev-server API and Gulp

Question

I've been using the webpack-dev-server with it's --inline and --host flags. This all works fine.

webpack-dev-server --inline --host example.com

I then looked at wrapping up this task using gulp and the webpack-dev-server API.

var gulp             = require('gulp');
var gutil            = require('gulp-util');
var Webpack          = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var WebpackConfig    = require('./webpack.config.js');

gulp.task('default', ['webpack-dev-server']);

gulp.task('webpack-dev-server', function(callback) {
  new WebpackDevServer(Webpack(WebpackConfig), {
    host: 'example.com',
    inline: true,
    publicPath: WebpackConfig.output.publicPath,
  }).listen(port, host, function(err) {
    if(err) throw new gutil.PluginError('webpack-dev-server', err);
    gutil.log('[webpack-dev-server]', 'http://example.com:8080');
  }); 
});

This does not seem to work, I believe there is no inline or host for the API.

Any idea if this is possible?

Answer 1

In the current Webpack version ( 1.13.2 ) this CAN be done.

From the documentation:

To use the inline mode, either

specify --inline on the command line.
specify devServer: { inline: true } in your webpack.config.js

Answer 2

The inline option can't be enabled via a flag in the options passed to the Server. However by taking a look at the command line script you can see that's it just appending additional entry scripts to the options passed to the webpack compiler.

You can repeat the same thing in your code.

WebpackConfig.entry = [
   WebPackConfig.entry, // assuming you have a single existing entry
   require.resolve("webpack-dev-server/client/") + '?http://localhost:9090',
   'webpack/hot/dev-server'
]