无法使用gulp启动webpack-dev-server

Question

当我在终端中运行"webpack-dev-server"时，它可以正常运行：

$ 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.

我正在尝试使用gulp启动它：

这是我的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']);

我的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']
                }
            }
        ]
    }
}

我遇到了以下错误：

$ 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)

我做错了什么？

- Komo

---

为什么要使用Object.create？只需删除那部分即可。 - Louay Alakkad

没有改变任何东西。 - Komo

相同的错误？看起来它没有识别您的 output 配置。 - Louay Alakkad

是的，同样的错误。Webpack 在单独运行时（在终端中）工作良好，因此配置似乎是正确的。 - Komo

Answer 1

您应将output.path设置为绝对目录，这样就可以正常工作。

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

- ngasull

---

@blint 我正在使用webpack https（webpack-dev-server --https --port 8080），如何在gulp中实现这一点？我尝试添加任务，捆绑正在进行，它没有抛出任何错误，但服务器没有启动。 - ShaMoh