关于webpack的网上最认真细致的hmr解析

谈到webpack想必大家都不陌生，在前端工程化大行其道的今天，大多数开发者都在用类似webpack， fis3，rollup，gulp，grunt等等的前端项目的打包构建工具。今天的猪脚就是webpack的hot module replacement，说道hmr想必大家会有所熟悉，这不就是更改源码，页面在不刷新的情况下某个模块做出改变吗？然而，或许大多数开发者看到的往往是页面的刷新所带来的源码更改效果，这个结果就违背了我们践行hmr技术的初衷了，原因呢，就是我们队配置不是很熟悉，所以今天我们需要仔细梳理一下hmr技术需要做到哪些准备。

本教程基于nodejs的api去实现，这样可以做到对流程最大化的控制。

1. 首先确webpack的配置对象的entry入口添加两个文件。

  对于在nodejs的api下，devserver是无法读取webpack的配置的，所以我们需要手动在入口处添加客户端文件，并且deverser的hot等配置项是无效的。

var config = require('config');
var webpack = require('webpack');
var webpackDevServer = require('webpack-dev-server');

var path = require('path');

var webpackConfig = require('../build/webpack.dev.config'); // 导入webpack配置对象

process.env.NODE_ENV = 'development';

var name = config.get('name');

webpackConfig.entry.unshift('webpack/hot/dev-server'); // 注入hot插件后的客户端文件，可以监听到某个模块去冒泡更新
webpackConfig.entry.unshift('webpack-dev-server/client?http://localhost:8080'); // 注入devserver客户端可以开启inilne模式监听源码变动，使其得到更新
var compiler = webpack(webpackConfig);// 编译配置并生成compiler对象

var server = new webpackDevServer(compiler, { // 生成devserver对象
});

server.listen(8080);

 

2. 确保配置的插件项里添加了webpack.HotModuleReplacement的这个插件

var path = require('path');
var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
var openBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
    entry: [path.join(__dirname, '../src/index.js')],
    output: {
        path: path.join(__dirname, '../dist'),
        filename: '[name].[hash].js',
        publicPath: '/'
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: path.join(__dirname, '../public/index.html'),
            inject: 'body'
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    module: {},
}

3. 在项目的入口处理module.hot.accept

if (module.hot) {
  module.hot.accept(() => {
    ReactDom.render(
        <App />,
        document.getElementById('root')
    )
  })
}

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

当然，到这里我们就实现了hmr所需要的所有配置了，但是呢，我们更改的诸如react的state会重置，所以，如果需要保留react的状态的话，我们还需要react-hot-loader插件。

4. 添加react-host-loader

  可以直接参考官网的栗子 https://github.com/gaearon/react-hot-loader