Как вы используете встроенный режим с API-интерфейсом webpack-dev-server и Gulp

Я использовал webpack-dev-server с флагами --inline и --host. Все это прекрасно работает.

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

Затем я рассмотрел завершение этой задачи, используя gulp и API-интерфейс webpack-dev-сервера.

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.

Любая идея, если это возможно?

Ответы

Ответ 1

Параметр inline не может быть включен с помощью флага в параметрах, переданных на Сервер. Однако, взглянув на командную строку 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'
]

Ответ 2

В текущей версии Webpack (1.13.2) это МОЖЕТ быть выполнено.

Из документации:

Чтобы использовать встроенный режим,

укажите --inline в командной строке.
укажите devServer: { inline: true } в webpack.config.js

Ответ 3

Встроенная опция недоступна, если с использованием API-подхода для создания webpack-dev-сервера, вместо этого нам нужно вручную определить

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

Ответ 4

Кажется, что ответы устарели, и я не смог использовать их для добавления 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);