即使在配置之后，React 热加载也不起作用答案

【问题标题】：React hot loading does not work even after configuration即使在配置之后，React 热加载也不起作用
【发布时间】：2018-02-18 00:42:36
【问题描述】：

安装了最新的 react-hot-loader

yarn add react-hot-loader@next

更新了入口点：

entry: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        './src/app.jsx'
    ],

为 babel 插件添加了 react-hot-loader/babel：

{
    test: /.jsx?$/,
    loader: 'babel-loader',
    include: path.resolve(__dirname, 'src'),
    exclude: /node_modules/,
    options: {
        presets: [['es2015', { modules: false }], 'react'],
        plugins: ['react-hot-loader/babel']
    }
},

添加了 HMR 插件

plugins: [
    new CopyWebpackPlugin([
        { from: 'src/index.html' }
    ]),
    new WriteFilePlugin(),
    new webpack.HotModuleReplacementPlugin()
],

使用的 AppContainer

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Home from './components/home';

const render = Component => {
    ReactDOM.render(
        <AppContainer>
            <Home />
        </AppContainer>,
        document.getElementById('react')
    )
};

render(Home);

if (module.hot) {
    module.hot.accept('./components/home', () => render(Home));
}

而且还是不行。页面会完全重新加载。

【问题讨论】：

标签： webpack babeljs react-hot-loader

【解决方案1】：

好的，经过一个小时的谷歌搜索和阅读，找到了这个。对于 Webpack 2 及以上版本，需要在 devServer 中添加以下配置：

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    hot: true
}

在我提到的earlier Webpack documentation 中，它建议这样做：

确保使用 --hot 标志或您的 webpack.config.js 中的 HotModuleReplacementPlugin，但不能同时使用两者在这种情况下，HMR 插件实际上是添加了两次，破坏了设置。

【讨论】：