webpack => ホットモジュール交換

備考

webpack-hot-middleware

webpack-dev-middlewareとwebpack-dev-middleware 、 webpack-hot-middleware/clientをエントリに追加して使用しwebpack-hot-middleware/client 。

設定

configsをクエリ文字列としてパスに追加します。例：

webpack-hot-middleware/client?path=/__what&timeout=2000&overlay=false

オプション	説明
パス	ミドルウェアがイベントストリームを提供しているパス
タイムアウト	切断後に再接続を試みるまでの待機時間
オーバーレイ	DOMベースのクライアント側オーバーレイを無効にするには、falseに設定します。
リロード	webpackがスタックしたときにページを自動リロードするには、trueに設定します。
noInfo	情報コンソールログを無効にするには、trueに設定します。
静か	すべてのコンソールロギングを無効にするには、trueに設定します。
dynamicPublicPath	パスの接頭辞としてwebpack publicPathを使用する場合はtrueに設定します。（実行時にエントリポイントで`__webpack_public_path__`動的に設定できます（ `__webpack_public_path__`注を`output.publicPath` ）

webpack-dev-middlewareで使用する

npm経由でwebpack-dev-middlewareをインストールする
```
npm i -D webpack-dev-middleware webpack-hot-middleware
```

webpack.config.jsを変更する

"entry"定義された各項目にwebpack-hot-middleware/clientを追加します"entry"

"plugins"にnew webpack.HotModuleReplacementPlugin()を追加する

module.exports = {
    entry: {
        js: [
            './index.js',
            'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true'
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

これらをindex.jsに追加する

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');

var config = require('./webpack.config.js');
var compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath,
    stats: { colors: true },
    watchOptions: {
        aggregateTimeout: 300,
        poll: true
    },
}));

app.use(webpackHotMiddleware(compiler, {
    log: console.log,
}));

モジュールのHMRを有効にする

モジュールをホットモジュール置換（HMR）に適格にするには、モジュールの内部にmodule.hot.accept()をmodule.hot.accept()ように追加するのが最も簡単な方法です。

// ...

if(module.hot) {
    module.hot.accept(); // This will make current module replaceable
}

webpack-dev-serverと一緒に使う

npmを介してwebpack-dev-serverをインストールします。
```
npm i -D webpack-dev-server
```

server.jsを追加してwebpack-dev-server設定しwebpack-dev-server 。

// server.js

var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var config = require("./webpack.dev.config");

var server = new WebpackDevServer(webpack(config), {
    // ...
});

server.listen(8080);

webpack.config.jsを変更する
- "entry"定義された各項目にwebpack-dev-server/clientを追加します。
- "entry"定義された各項目にwebpack/hot/only-dev-serverを追加します。
  - 注：必要に応じて変更してください...
  - HMRが失敗した場合は、 webpack/hot/only-dev-serverをwebpack/hot/only-dev-serverしてページの更新をブロックします。
  - HMRが失敗した場合は、 webpack/hot/dev-serverをwebpack/hot/dev-serverしてページを自動更新します。
- "plugins"にnew webpack.HotModuleReplacementPlugin()を追加する
```
module.exports = {
    entry: {
        js: [
            'webpack-dev-server/client?http://localhost:8080'
            'webpack/hot/only-dev-server',
            './index.js'
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};
```

hot: true追加hot: true webpack-dev-server設定でhot: true

var server = new WebpackDevServer(webpack(config), {
    hot: true

    // ... other configs
});

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

webpack
ホットモジュール交換

サーチ…

備考

webpack-hot-middleware

設定

webpack-dev-middlewareで使用する

モジュールのHMRを有効にする

webpack-dev-serverと一緒に使う