Webpack-dev-server 不是热重载答案

【问题标题】：Webpack-dev-server is not hot-reloadingWebpack-dev-server 不是热重载
【发布时间】：2017-02-28 13:36:48
【问题描述】：

Webpack-dev-server 不是热加载，而是重新加载整个页面并刷新状态。

我的 webpack.config

  entry: {
    "app": [
        "webpack-dev-server/client?http://localhost:3000/",
        'webpack/hot/dev-server',
        "./src/index.js",
    ],
    "vendor": [
        "webpack-dev-server/client?http://localhost:3000/",
        'webpack/hot/dev-server',
        "react", "react-router", "react-dom", "redux", "react-redux", "redux-logger", "redux-thunk"
    ]
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: DEV ? 'js/app.bundle.js' : 'js/app.[chunkhash:6].js',
    publicPath:'http://localhost:3000/'
  },

package.json

"start": "webpack-dev-server --progress --inline --hot --history-api-fallback --port 3000"

src/index.js

window.addEventListener('DOMContentLoaded', () => {
    let container = document.getElementById(appName);

    if (!container) {
        container = document.createElement('div');
        container.id = appName;
        container.className = appName;
        document.body.appendChild(container);
    }

    render(<ProviderComponent />, container);

    if (module.hot) {
    // Whenever a new version of App.js is available
    module.hot.accept('./provider',  () => {
    // Require the new version and render it instead
        const NextApp = require('./provider').default
        console.log(NextApp);
        render(<NextApp />, container)
    })
    }
});

provider.js

import React from 'react';
import { Router, browserHistory } from 'react-router';
import { Provider } from 'react-redux';

import Routes from './routes.js';
import clientStore from './clientStore.js';

class ProviderComponent extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    return (
      <Provider store={clientStore}>
        <Router history={browserHistory}>{Routes}</Router>
      </Provider>
    );
  }
}

export default ProviderComponent;

在网上搜索后，我发现很多人都遇到过类似的问题。我再次查看了我的代码，它已经包含了在不同页面中指出的所有解决方案。而且，我无法弄清楚是否还有其他一些我遗漏的 webpack 内部复杂性。

【问题讨论】：

标签： reactjs webpack webpack-dev-server

【解决方案1】：

过去我在使用 webpack-dev-server 时遇到过类似的问题。

我的解决方案是将 reload=true 添加到 webpack 配置的条目中。

entry: {
"app": [
    "webpack-dev-server/client?http://localhost:3000&reload=true",
    'webpack/hot/dev-server',
    "./src/index.js",
],

【讨论】：