Cannot start webpack-dev-server with gulp

Question

When I run 'webpack-dev-server' from my terminal it runs fine :

$ webpack-dev-server
http://localhost:3333/
webpack result is served from /./assets/
content is served from C:\Users\Komo\Documents\work\training
Hash: e705c984af7e83cbb685
Version: webpack 1.12.9
Time: 8556ms
    Asset    Size  Chunks             Chunk Names
bundle.js  905 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 855 kB [rendered]
...
webpack: bundle is now VALID.

I'm trying to start it with gulp :

Here is my gulpfile.js :

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('webpack-dev-server', function (c) {
    var myConfig = Object.create(webpackConfig);

    myConfig.devtool = 'eval';
    myConfig.debug = true;

    // Start a webpack-dev-server
    new WebpackDevServer(webpack(myConfig), {
        stats: {
            colors: true
        }
    }).listen(myConfig.devServer.port, 'localhost', function (err) {
        if (err) {
            throw new gutil.PluginError('webpack-dev-server', err);
        }
        gutil.log('[webpack-dev-server]', 'http://localhost:3333/index.html');
    });
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['webpack-dev-server']);

and my webpack.config.js:

module.exports = {
    entry: './main.js',
    output: {
        path: './',
        publicPath: './assets/',
        filename: 'bundle.js'
    },
    devServer: {
        inline: true,
        port: 3333
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}

I get the following error :

$ gulp
[13:56:24] Using gulpfile ~\Documents\work\training\gulpfile.js
[13:56:24] Starting 'webpack-dev-server'...
[13:56:24] [webpack-dev-server] http://localhost:3333/index.html

Error: invalid argument
    at pathToArray (C:\Users\Komo\Documents\work\training\node_modules\webpack-dev-server\node_modules\webpack-dev-middleware\node_modules\memory-fs\lib\MemoryFileSystem.js:44:10)
    at MemoryFileSystem.mkdirpSync (C:\Users\Komo\Documents\work\training\node_modules\webpack-dev-server\node_modules\webpack-dev-middleware\node_modules\memory-fs\lib\MemoryFileSystem.js:139:13)
    at MemoryFileSystem.(anonymous function) [as mkdirp] (C:\Users\Komo\Documents\work\training\node_modules\webpack-dev-server\node_modules\webpack-dev-middleware\node_modules\memory-fs\lib\MemoryFileSystem.js:279:34)
    at Compiler.<anonymous> (C:\Users\Komo\Documents\work\training\node_modules\webpack\lib\Compiler.js:229:25)
    at Compiler.applyPluginsAsync (C:\Users\Komo\Documents\work\training\node_modules\webpack\node_modules\tapable\lib\Tapable.js:60:69)
    at Compiler.emitAssets (C:\Users\Komo\Documents\work\training\node_modules\webpack\lib\Compiler.js:226:7)
    at Watching.<anonymous> (C:\Users\Komo\Documents\work\training\node_modules\webpack\lib\Compiler.js:54:18)
    at C:\Users\Komo\Documents\work\training\node_modules\webpack\lib\Compiler.js:403:12
    at Compiler.next (C:\Users\Komo\Documents\work\training\node_modules\webpack\node_modules\tapable\lib\Tapable.js:67:11)
    at Compiler.<anonymous> (C:\Users\Komo\Documents\work\training\node_modules\webpack\lib\CachePlugin.js:40:4)

What am I doing wrong ?

Answer 1

You should set output.path as an absolute directory and it will work.

module.exports = {
    entry: './main.js',
    output: {
        path: __dirname + '/',
        publicPath: './assets/',
        filename: 'bundle.js'
    },
    ...
}