如何通过 webpack-dev-server API 和 Gulp 使用内联模式

Question

我一直在使用带有--inline 和--host 标志的webpack-dev-server。这一切都很好。

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

在当前的 Webpack 版本 (1.13.2) 中可以做到这一点。

来自documentation：

要使用内联模式，要么

在命令行中指定--inline。
在您的webpack.config.js 中指定devServer: { inline: true }

Answer 2

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

使用 API 方式创建 webpack-dev-server 时 inline 选项不可用，需要手动定义

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

Answer 4

似乎答案已经过时了，我没有设法通过 gulp 使用它们中的任何一个来添加 inline，所以我打开了 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 5

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