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

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',
    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]', ':8080');
  }); 
});

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

Any idea if this is possible?

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?

• javascript
• gulp
• webpack

5 Answers 5

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

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'
]

The inline option in not available when using API approach to create webpack-dev-server, instead we need to manually define

webpack-dev-server/client?http://<path>:<port>/

to (all) entry point(s). Reason being the webpack-dev-server module has no access to the webpack configuration. https://webpack.github.io/docs/webpack-dev-server.html#inline-mode-with-node-js-api

It seems that that the answers got outdated and I did not manage to use any of them to add the inline via gulp, so I opened webpack-dev-server.js and copied the method that does that to my gulp file and modified it a bit. It works (even though it's a bit nasty):

function addInline(config, hot) {
    var devClient = [require.resolve("webpack-dev-server/client/") + "?http://localhost:8080"];

    if (hot) {
        devClient.push("webpack/hot/dev-server");
    }
    [].concat(config).forEach(function (config) {
        if (typeof config.entry === "object" && !Array.isArray(config.entry)) {
            Object.keys(config.entry).forEach(function (key) {
                config.entry[key] = devClient.concat(config.entry[key]);
            });
        } else {
            config.entry = devClient.concat(config.entry);
        }
    });
}

You will need to pass the config in there before you pass it to webpack:

var webpackDevelopmentConfig = require('./Source/config/webpack.config.development.js');
addInline(webpackDevelopmentConfig)

var compiler = webpack(webpackDevelopmentConfig);

Inline mode is enabled by default - go to http://host:port/webpack-dev-server/