如何使用webpack-dev-server API和Gulp

使用內聯模式我一直在使用webpack-dev-server，它的--inline和--host標誌。這一切工作正常。如何使用webpack-dev-server API和Gulp

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

我又看了看包裹起來使用gulp和的WebPack-DEV-服務器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。

這是可能的任何想法？

來源

2015-01-08 Hugh

-1

串聯模式是默認啓用的 - 去http://host:port/webpack-dev-server/

來源

2015-01-14 12:25:36

也許我誤解了在線模式實際上是，但我認爲這意味着一個非框架模式。來自http：// host：port/webpack-dev-server /的服務是我試圖避免的，因爲它會導致佈局問題。 – Hugh

我認爲我錯了，你是對的。你想要的不是主機：端口/ ？默認情況下，您可以在非框架模式下訪問那裏的文件。 –

你可能確實是對的。該文檔有點令人困惑，因爲它似乎首先提到了隱含的內聯模式，然後是明確的內聯模式。不幸的是，設置「主機」對我來說也是非常有用的。我想我需要更多地深入代碼。 – Hugh

inline選項無法通過在傳遞到服務器的選項標誌啓用。然而，通過查看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' 
]

來源

2015-07-05 13:41:00

中不可用時使用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

來源

2016-08-16 09:13:03 ajaykumar

在當前的Webpack版本（1.13.2）中，可以這樣做。

從documentation：

要使用串聯模式，無論是

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

來源

2016-09-17 00:55:37

我從來沒有設法得到這個工作，文檔仍然說服務器不知道任何關於webpack.config.js ... –

看來，答案有過時的，我沒能使用其中的任何添加通過吞掉了inline，所以我打開webpack-dev-server.js和複製，做的是對的方法我的一大堆文件並修改了一下。它的工作原理（即使它是一個有點討厭）：

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-08 14:13:02

如何使用webpack-dev-server API和Gulp

回答

相關問題