Question

我一直在使用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。

知道这是否可行？

Answer 1

无法通过传递给服务器的选项中的标志启用内联选项。但是，通过查看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 2

在当前的Webpack版本（1.13.2）中，可以完成此操作。

来自documentation：

要使用内联模式，

在命令行中指定Source: local data frame [15 x 3] Groups: grp [5] A B grp <int> <int> <dbl> 1 0 1 1 2 0 1 1 3 0 1 1 4 0 1 1 5 0 1 1 6 0 1 1 7 1 1 3 8 0 1 3 9 1 0 5 10 0 0 5 11 0 0 5 12 0 0 5 13 1 0 6 14 1 1 7 15 0 1 7   在--inline
中指定devServer: { inline: true }

Answer 3

似乎答案已过时，我没有设法使用其中任何一个来添加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);

Answer 4

默认情况下启用内联模式 - 转到http://host:port/webpack-dev-server/

如何在webpack-dev-server API和Gulp中使用内联模式

4 个答案: