Node.js APIを使用した場合のwebpack-dev-serverでのライブリロード

Question

非常に単純なwebpackプロジェクトをセットアップし、webpack-dev-serverをインストールすると、コマンドから "webpack-dev-server --open"私はデフォルトでライブリロードを取得します。私。ソースファイルを編集するとすぐにバンドルが再構築され、ブラウザが自動的にリロードされます。

私は次のコードを使用して、代わりにWebPACKの-devのサーバーを起動するノードのAPIを使用する場合は、：

const WebpackDevServer = require('webpack-dev-server'); 
const webpack = require('webpack'); 
const webpackConfig = require('../webpack.config.dev'); 
const open = require('open'); 

const port = 3000; 

let compiler = webpack(webpackConfig); 
let server = new WebpackDevServer(compiler, { 
    contentBase: "./src", 
}); 

server.listen(port, "localhost", function(err) { 
    if(err){ 
     console.log(err); 
    } 
    else{ 
     open('http://localhost:' + port); 
    } 
}); 

私は生きてリロードを失います。ソースファイルを変更すると、webpackがコマンドライン出力からバンドルを再構築してもブラウザは更新されません。

私の場合、ホットモジュールリロードは必須ではなく、実際には望ましくないことに注意してください。 webpack-dev-server CLIを使用しているときにデフォルトで表示されるようにページを正確に更新したいだけです。

Answer 1

設定のすべてのエントリについて、次のように追加します。'webpack-dev-server/client?http://localhost:8080'、クエリ文字列内のURLをローカルサーバーのURLと置き換えます。

このエントリポイントを追加すると、エントリポイントにアレイを使用する必要があります。これは、次の2つの方法のいずれかになります。

entry: ['webpack-dev-server/client?http://localhost:8080', 'app.js'] 

entry: { 
    a: ['webpack-dev-server/client?http://localhost:8080', 'app.js'], 
    b: ['webpack-dev-server/client?http://localhost:8080', 'other.js'], 
} 

開発固有の設定でのみ使用してください。

それだけです！私はthis YouTube videoを見ているときにこの細部に気付いたので、クレジットは作者に行きますが、レポをさらに検討すると、それはthe exampleにありました。

Answer 2

主に自分自身へのメモとしてこれを残して、他は利益を得ることができる：これは、VirtualBox内にLubuntuに私の仕事：

watchOptions: { 
    poll: true 
} 

注：ノードAPIを使用した場合、WebPACKの設定devServerオプションは無視されますが、あなたはとても似devServerオプションを渡す必要があります：私が見つけたまで、私はSOに検索し、あらゆる種類のものをしようとしていた

const s = new WebpackDevServer(compiler, { 
    stats: { 
    colors: true 
    }, 
    inline: true, 
    watchOptions: { 
    poll: true 
    } 
}); 

Answer 3

WebPACKの2/3以下：

... webpackDevServer.addDevServerEntrypoints(config, options); ...

Webpackチームは明らかにwebpack-dev-serverモジュールにutilを追加しました。詳細については、docsを参照してください。https://webpack.js.org/guides/hot-module-replacement/

私にとっては魅力的です。