Question

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内部错综复杂。

Answer 1

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

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

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

Webpack-dev-server不是热重载

1 个答案: