【Webpack】HMR

HMRというワードを聞いたので調査

HMRとはHot Module Replacementの略で、画面の再描画すること無しにJSの変更をブラウザに適用してくれる開発ツールのことだった

そして、すでにwebpackで使っていた

webpack.js.org

webpackで使っているHMR

SSRをしているので、webpack.config.jsのプラグインに差し込んだ上で、webpack-dev-middlewareとwebpack-hot-middlewareをexpressに組み込んで使っている

導入手順

① .babelrc

{
  "plugins": ["react-hot-loader/babel"]
}

② root component

import { hot } from 'react-hot-loader/root';
const App = () => <div>Hello World!</div>;
export default hot(App);

③ webpack.config.jsのプラグインに差し込む

module.exports = {
  ..
  entry: [
    ...
    "webpack-hot-middleware/client?" +
      qs.stringify({
        path: "/__webpack_hmr",
        timeout: 20000,
        reload: true,
        quiet: false,
        noInfo: false,
      }),
  ],
  plugins: [
    ...
    new webpack.HotModuleReplacementPlugin()
  ]
};

④ expressにwebpack-dev-middlewareとwebpack-hot-middlewareを組み込む

const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('../webpack.config.js');

app.use(webpackDevMiddleware(multiCompiler, { publicPath }));
app.use(webpackHotMiddleware(clientCompiler));

参考

https://qiita.com/haradakunihiko/items/40486ec2b6b9aea119bb https://qiita.com/riversun/items/e2ab9ac8aa4bde643641