Question

我正在尝试设置热模块替换（HMR），但我的浏览器刷新而不仅仅是热交换。这是我的webpack.config.js：

module.exports = {
    devtool: 'eval-source-map',
    entry: {
        app: [
            path.join(__dirname, './App.js'),
            'webpack-hot-middleware/client?reload=true'
        ],
        vendors: ['react', 'react-router']
    },
    output: {
        filename: './bundle.[hash].js',
        chunkFilename: './[id].[hash].js',
        path: path.join(__dirname,'/dist'),
        publicPath: '/'
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015']
                }
            }, {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.ejs'
        }),

        new CommonsPlugin({
            name: 'vendors',
            filename: 'vendors.js',
            minChunks: Infinity
        }),

        new CleanWebpackPlugin(['dist'], {
            root: __dirname,
            verbose: true,
            dry: false
        }),

        new webpack.HotModuleReplacementPlugin()
    ]
};

我正在使用express

提供服务

var app = express();

var compiler = webpack(config);
var middleware = webpackMiddleware(compiler, {
  publicPath: config.output.publicPath,
  contentBase: 'src',
  stats: {
    colors: true,
    hash: false,
    timings: true,
    chunks: false,
    chunkModules: false,
    modules: false
  }
});

app.use(middleware);
app.use(webpackHotMiddleware(compiler));

app.use(express.static('./dist'));

app.get('*', function(req, res) {
  res.write(middleware.fileSystem.readFileSync(path.join(__dirname, 'dist/index.html')));
  res.end();
});

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;

  console.log('Example app listening at http://%s:%s', host, port);
});

这是我的App.js

const rootRoute = {
    component: 'div',
    childRoutes: [ {
        path: '/',
        component: Main,
        childRoutes: [
            require('./routes/reports')
        ]
    } ]
};

render(
    <Router history={browserHistory} routes={rootRoute} />, document.getElementById('app')
);

require

中的哪个reports

module.exports = {
    path: 'reports',
    getComponents(location, cb) {
        require.ensure([], (require) => {
            cb(null, require('./components/Reports'))
        })
    }
}

特别是component：

class Reports extends React.Component {
    render() {
        let style = {
            background: 'green'
        };
        return (
                <div style={style}>
                    <h2>Reports</h2>
                </div>
        )
    }
}

module.exports = Reports;

当我更改style中的component颜色时，style会更新，但会刷新整个页面。

我的config有什么问题？

为什么我的浏览器刷新而不是仅使用HMR重新加载组件？

0 个答案: