Come si usa la modalità inline con l'API webpack-dev-server e Gulp

Question

Sto usando lo webpack-dev-server con le sue bandiere --inline e --host. Tutto funziona bene.

webpack-dev-server --inline --host example.com

Poi ho guardato il confezionamento di questo compito utilizzando gulp e l'API webpack-dev-server.

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'); 
    }); 
}); 

Questo non sembra funzionare, credo che ci sia alcun inline o host per l'API.

Qualche idea se è possibile?

Answer 1

modalità inline è abilitato per default - andare a http://host:port/webpack-dev-server/

Answer 2

L'opzione in linea non può essere attivata tramite una bandiera nelle opzioni passate al server. Tuttavia dando un'occhiata allo command line script si può vedere che si tratta solo di aggiungere script di immissione aggiuntivi alle opzioni passate al compilatore del webpack.

È possibile ripetere la stessa cosa nel codice.

WebpackConfig.entry = [ 
    WebPackConfig.entry, // assuming you have a single existing entry 
    require.resolve("webpack-dev-server/client/") + '?http://localhost:9090', 
    'webpack/hot/dev-server' 
] 

Answer 3

L'opzione inline in non è disponibile quando utilizza approccio API per creare webpack-dev-assistente, invece abbiamo bisogno di definire manualmente

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

a (tutti) Punti di ingresso). Il motivo del modulo webpack-dev-server non ha accesso alla configurazione del webpack. https://webpack.github.io/docs/webpack-dev-server.html#inline-mode-with-node-js-api

Answer 4

Nella versione attuale Webpack (1.13.2) questo può essere fatto.

Dal documentation:

Per utilizzare la modalità in linea, sia

specificare --inline sulla riga di comando.
specificare devServer: { inline: true } nel vostro webpack.config.js

Answer 5

Sembra che che le risposte ottenuto obsoleti e non sono riuscito a utilizzare uno di loro di aggiungere il inline via sorso, così ho aperto webpack-dev-server.js e copiato il metodo che lo fa a il mio file gulp e modificato un po '. Funziona (anche se è un po 'brutto):

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

Sarà necessario passare il config in là prima di passare a webpack:

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

var compiler = webpack(webpackDevelopmentConfig);