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

这似乎不起作用，我相信没有inline或host用于API。

知道这是否可能吗？

4

5 回答 5

5

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

从文档中：

要使用内联模式，要么

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

于 2016-09-17T00:55:37.430 回答
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时 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

于 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 回答
-1

Inline mode is enabled by default - go to http://host:port/webpack-dev-server/

于 2015-01-14T12:25:36.673 回答