webpack-dev-server API와 Gulp에서 인라인 모드를 사용하는 방법

Question

을 --inline 및 --host 플래그와 함께 사용했습니다. 이 모든 것이 잘 작동합니다.

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

나는 다음 gulp를 사용하여이 작업과 웹팩-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 없다 생각합니다.

가능한지 알고 싶습니다.

Answer 1

인라인 모드는 기본적으로 활성화되어 있습니다 - 서버에 전달 된 옵션의 플래그를 통해 활성화 할 수 없습니다 http://host:port/webpack-dev-server/

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

웹팩-DEV-서버를 만들 API 접근를 사용 는, 대신에 우리가 수동으로

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

현재 Webpack 버전 (1.13.2)에서이 작업을 수행 할 수 있습니다. documentation에서

:

인라인 모드를 사용하려면, 하나

명령 행에서 --inline를 지정합니다. 에서
지정 devServer: { inline: true } 당신의 webpack.config.js

Answer 5

것 같다 그 대답은 오래된 있고 난 꿀꺽 꿀꺽 통해 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); 
     } 
    }); 
} 

당신이 웹팩에 전달하기 전에 거기에 설정을 통과해야합니다

var webpackDevelopmentConfig = require('./Source/config/webpack.config.development.js'); 
addInline(webpackDevelopmentConfig) 

var compiler = webpack(webpackDevelopmentConfig);