10

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?

5 Answers 5

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

1
  • 1
    I never managed to get this working and the documentation still says that server does not know anything about webpack.config.js... Nov 8, 2016 at 14:09
4

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

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

0

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);
-1

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

6
  • 1
    Perhaps I've misunderstood what inline mode actually is, but I thought it implied a non-iframed mode. Serving from host:port/webpack-dev-server is what I'm trying to avoid as it causes layout issues.
    – Hugh
    Jan 14, 2015 at 13:33
  • 1
    I think I was wrong and you are right. What you want isn't host:port/<path>? By default you can access the files there in a non-iframed mode.
    – Jeff Ling
    Jan 14, 2015 at 21:02
  • You may indeed be right. The documentation is a little confusing as it seems to first mention an implied inline mode and then an explicit one. Unfortunately setting the host is also very useful to me. I think i need to dive into the code a bit more.
    – Hugh
    Jan 15, 2015 at 9:21
  • @Hugh, did you figure this out, I'm also trying to figure this out. Jun 30, 2015 at 13:54
  • 1
    @Hugh, I actually ended up configuring my server correctly, but I don't know which thing was specifically the cause of it working. So the web address /webpack-dev-server/ is just an iframe targetting the location / on the same host, and /webpack-dev-server without the trailing slash shows you a webpage with all compiled bundles. Other things that helped me were removing publicPath and filename from the dev server config and including <script src="/webpack-dev-server.js"></script> on my pages. Jun 30, 2015 at 19:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.