10

私はそれとフラグでwebpack-dev-serverを使用しています。これはすべてうまくいきます。--inline--host

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

次に、 gulpと webpack-dev-server 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。

これが可能かどうか、何か考えはありますか?

4

5 に答える 5

4

インライン オプションは、サーバーに渡されるオプションのフラグを介して有効にすることはできません。ただし、コマンド ライン スクリプトを見ると、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'
]
于 2015-07-05T13:41:00.013 に答える
0

API アプローチを使用して webpack-dev-server を作成する場合、インライン オプションは使用できません。代わりに、手動で定義する必要があります

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

(すべての) エントリ ポイントへ。理由は、webpack-dev-server モジュールが webpack 構成にアクセスできないためです。 https://webpack.github.io/docs/webpack-dev-server.html#inline-mode-with-node-js-api

于 2016-08-16T09:13:03.030 に答える
0

回答が古くなっているようで、それらを使用しinlineて gulp 経由で追加することができなかったので、それを行うメソッドを開いwebpack-dev-server.jsて 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);
于 2016-11-08T14:13:02.587 に答える