即使在配置之后，响应热加载也不起作用。

Question

安装了最新的“反应热”加载程序。

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'
    ],

添加了react热加载程序/ babel到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));
}

但仍然不起作用。该页面将完成一个完整的重新加载。

Answer 1

好吧，经过一个小时的搜索和阅读，找出了这个答案。在Webpack 2及以上版本中，应该将以下配置添加到devServer中：

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

在我提到的Webpack早期文献中，它建议如下：

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