webpack-dev-server APIとGulpでインラインモードを使用するには

Question

私はを--inlineと--hostフラグで使用しています。これはすべて正常に動作します。

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

私はその後gulpを使用してこのタスクとのWebPACK-devのサーバー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'); 
    }); 
}); 

これは動作するようには思えない、私はAPIのためのinlineまたはhostがないと信じています。

可能かどうか

Answer 1

インラインモードがデフォルトで有効になっています - サーバーに渡されるオプションでフラグを経由して有効にすることができませんhttp://host:port/webpack-dev-server/

Answer 2

inlineオプションにアクセスしてください。しかし、command line scriptを見ると、webpackコンパイラに渡されるオプションに追加のエントリスクリプトを追加するだけであることがわかります。

コード内で同じことを繰り返すことができます。

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

のWebPACK-devのサーバーを作成するためのAPIアプローチを使用しては、代わりに私たちは手動に

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

を定義する必要があるときに利用できないのインラインオプション（すべて）エントリーポイント。 webpack-dev-serverモジュールを使用している理由 にはwebpack設定へのアクセス権がありません。

Answer 4

現在のWebpackバージョン（1.13.2）では、これを行うことができます。 documentationから

：

はインラインモードを使用するには、いずれかの

は、コマンドラインで--inlineを指定します。
答えが古くなったとことを私は一口経由inlineを追加するためにそれらのいずれかを使用することが出来なかったので、私はwebpack-dev-server.jsを開いたとのことないメソッドをコピーしたものと思わあなたwebpack.config.js

Answer 5

でdevServer: { inline: true }を指定します私のgulpファイルとそれを少し修正しました。それは（それは少し厄介だにも関わらず）動作します：

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

あなたはWebPACKのにそれを渡す前に、あなたはそこに設定を渡す必要があります：

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

var compiler = webpack(webpackDevelopmentConfig);