webpack-dev-server -hot対HotModuleReplacementPlugin（）

Question

次の設定では、HotModuleReplacementPlugin（）を使ってホットモジュールを置き換えることができましたが、webpack-dev-serverを実行するときに--hotを使用することはできません。私の質問は、なぜですか？

ホットモジュールの交換を設定するための最近のガイドのほとんどは--hotですが、それは私にとっては役に立ちません。

var webpack = require("webpack"); 
 
var path = require("path"); 
 
    
 
const config = { 
 
    entry: path.resolve(__dirname, 'app/index.js') , 
 
    output: { 
 
    path: path.resolve(__dirname, 'output'), 
 
    filename: 'bundle.js', 
 
    publicPath: "static/" 
 
    }, 
 
    module: { 
 
    rules: [ 
 
     {test: /\.(js|jsx)$/, use: 'babel-loader'} 
 
    ] 
 
    }, 
 
    plugins: [ 
 
    new webpack.HotModuleReplacementPlugin() 
 
    ] 
 

 
}; 
 
    
 
module.exports = config;

私はそうのように私のコードファイルを参照しています。

私のように私のサーバーを実行しています。

webpack-dev-server --inline --colors --progress 

バージョン。

webpack-dev-server 2.3.0 
webpack 2.2.1 

この設定では、ホットモジュールの読み込みが正しく機能しています。プラグインを削除して、--hot（多くの例で見たように）を追加してサーバーを実行すると、ホットモジュールロードが機能しません。サーバーは変更を登録します。トランジレーターが発生すると、私のWebページはリロード中のように見えますが、コンテンツは更新されません。

私はhttp://localhost:8080/webpack-dev-server/index.html

構造を介してアクセスしていますが、この+ node_modulesディレクトリのように見えます。

. 
├── app 
│   └── index.js 
├── index.html 
├── output 
│   ├── bundle.js 
│   └── index.js 
├── package.json 
└── webpack.config.js 

---

更新

も同じ結果を有するWebPACKの設定ファイル、にdevServerを追加しようとしています。

devServer: { 
compress: true, 
publicPath: "http://localhost:8080/static/", 
filename: "bundle.js", 
hot: true, 
inline: true 

}

Answer 1

あなたwebpack.config.jsファイル内devServerプロパティを設定しましたか？

devServer: { 
    ... 
    historyApiFallback: true, 
    hot: true, 
    inline: true, 
    compress: true, 
    ... 
}, 
plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    ... 
], 
... 

package.json

"scripts": { 
    "development": "webpack-dev-server --progress --colors" 
} 

Answer 2

あなたは、同様にこれを追加する必要があります

entry: { 
    'app': [ 
     'webpack-dev-server/client?http://localhost:8080', 
     'webpack/hot/only-dev-server', 
     `${PATHS.SOURCE}/index.jsx` 
    ] 
}