2015-12-19 14 views
14

Quando eseguo 'webpack-dev-server' dal mio terminale funziona benissimo:Impossibile avviare webpack-dev-server con gulp

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

sto cercando di iniziare con sorso:

qui è la mia 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']); 

e la mia 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'] 
       } 
      } 
     ] 
    } 
} 
.210

ottengo il seguente errore:

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

Che cosa sto facendo di sbagliato?

+0

Perché stai utilizzando 'Object.create'? Basta rimuovere quella parte. – Louy

+0

Non ha modificato nulla – Komo

+0

Lo stesso errore? sembra che non riconosca la tua configurazione 'output'. – Louy

risposta

30

È necessario impostare output.path come absolute directory e funzionerà.

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

Grazie amico, funziona! – Komo

+0

@blint Sto usando webpack https (webpack-dev-server --https --port 8080) come ottenere questo risultato usando gulp? Ho provato ad aggiungere attività per questo, il raggruppamento sta accadendo e non sta generando alcun errore, ma il server non è stato avviato – ShaMoh