webpack-hot-middleware无法进行热替换

Question

以下是我的服务器代码：

if (process.env.NODE_ENV === 'development') {
        // Enable logger (morgan)
        app.use(morgan('dev'));

        // Disable views cache
        app.set('view cache', false);

        var webpack = require('webpack');
        var webpackDevMiddleware = require('webpack-dev-middleware');
        var webpackHotMiddleware = require('webpack-hot-middleware');

        var webpackConfig = require('../client/webpack.config');
        var compiler = webpack(webpackConfig);

        app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath }));
        app.use(webpackHotMiddleware(compiler));

    }

以下是我的webpack配置文件：

module.exports = {
  entry: {
    main: [
        'webpack-hot-middleware/client',
        './client/src/main'
    ]
  },
  output: {
    path: path.join(__dirname, 'client/build'),
    filename: 'bundle.js',
    publicPath: '/build/'
  },
  plugins: [
    new AureliaWebpackPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: {stage: 0} },
      { test: /\.css?$/, loader: 'style!css' },
      { test: /\.html$/, loader: 'raw' },
      { test: /\.(png|gif|jpg)$/, loader: 'url-loader?limit=8192' },
      { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff2' },
      { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
    ]
  }
};

每当我更改源文件时，webpack会重新构建，没有问题。不过，在浏览器中没有热替换或重新加载...我错过了什么吗？我认为我遵循了指示。

提前感谢你的回复。

- pQuestions123

---

浏览器控制台有任何错误吗？ - Bob Sponge

请确保 process.env.NODE_ENV === 'development' 的值为 true。 - Bob Sponge

@BobSponge 确认 process.env.NODE_ENV === 'development' 为真（即代码执行进入 if 语句），并且浏览器控制台没有错误。 - pQuestions123

@BobSponge 我在浏览器控制台看到了一个“[HMR] Connected”消息。 - pQuestions123

愚蠢的问题：也许它正在工作，并且只是进行了完整页面重新加载，因此您始终查看“已连接”？尝试将 reload 参数指定为 false：webpack-hot-middleware/client?reload=false。 - Bob Sponge

Answer 1

当我向webpack-hot-middleware添加一些参数以启用HMR，并在入口中向webpack-hot-middleware/client添加查询参数时，我的问题成功解决，示例如下：

//#server.js  add parameters to Enables HMR
    app
    .use(webpackHotMiddleware(compiler, {
       'log': false, 
       'path': '/__webpack_hmr', 
       'heartbeat': 10 * 1000
    }))


//# webpack.config.js:
       entry: {
         main: [
            'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true',
            './client/src/main'
              ]

- JhonQO

---

谢谢！这确实帮助我解决了关于实时重新加载的问题。 - LordDave

Answer 2

我的问题实际上已经在文档中有所涉及。我使用了webpack-hot-middleware上游的压缩模块，但没有更新压缩模块。

请查看此问题： https://github.com/glenjamin/webpack-hot-middleware/issues/10

基本上，如果你正在使用压缩，请确保升级到^1.6。我将1.2升级到1.6.1，现在可以进行热重载了。

- pQuestions123

---

我使用的是 1.6.2，但它对我不起作用。但是我只是在压缩之前注册了中间件，这就足够了。感谢分享，我花了很多时间（几天）试图让它工作。 - BrunoLM