# Webpack-HMR

HMR: Hot Module Replacement

分清楚hot reload 和 hot update 三种方式实现：

webpack-dev-middleware + webpack-hot-middleware + small code
webpack-dev-middleware + webpack-hot-middleware + react-hot-loader
webpack-dev-server

# 原则

搞清楚你的代码库是一个App还是一个lib

# 方法一

webpack-dev-middleware + webpack-hot-middleware + small code

// config/webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: [
    'webpack-hot-middleware/client',
    './src/index.js'
  ],
  devtool: 'inline-source-map',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      title: 'Development',
      template: './template/index.html',
    }),
  ],
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader'
        }
      },
    ]
  },
  mode: 'development'
};

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

const port = process.env.PORT || 3000;

const app = express();
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
}));

app.use(webpackHotMiddleware(compiler));

app.listen(port, function() {
  console.log('Listening at http://localhost:' + port);
});

// templates/index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
<!--[if lt IE 11 ]>
<p>请使用IE11.0以上版本或Chrome, Firefox浏览器来访问本站。</p>
<![endif]-->
<div id='root'>
</div>
</body>
</html>

// src/index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

//For Hot Module Replacement work in development
if(module.hot) {
  module.hot.accept();  //为什么加这段代码: https://github.com/webpack-contrib/webpack-hot-middleware/issues/43#issuecomment-155697146
}

// packages.json
"start": "node ./examples/server.js",

# 方法二

webpack-dev-middleware + webpack-hot-middleware + react-hot-loader

与方法一的配置基本一样，但在index.js中不太一样

// src/App.js
import { hot } from 'react-hot-loader';
class App extends Component {
  render() {
    return ();
  }
}

export default hot(module)(App);

// src/index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

# 方法三

webpack-dev-server

Follow https://webpack.js.org/guides/hot-module-replacement/

# 参考：

← Webpack V4 Webpack-Optimize →