javascript - Webpack - [HMR] 热模块替换被禁用

Question

我环顾四周，但无法获得我在 stackoverflow 上看到的任何答案。

我无法使用 webpack 或 webpack dev-server 的命令行；我只能使用 Node API。

下面是我是如何使用 webpack 的。

webpack.config.js

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    // i've also tried webpack/hot/dev-server here
    'webpack/hot/only-dev-server',
    path.join(__dirname, 'src', 'js', 'app.jsx')
  ],
  output: {
    path: path.join(__dirname, 'dist', 'js'),
    filename: 'script.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [{
      test: /\.(js|jsx)$/,
      loaders: ['react-hot', 'babel']
    }]
  },
  plugins: []
};

包含在 gulp 任务“开始”中

gulp.task('start', function (callback) {
  var config = Object.create(require('webpack.config.js'));
  config.plugins.push(new webpack.HotModuleReplacementPlugin());

  var devServer = new webpackDevServer(webpack(config), {
    stats: { colors: true },
    contentBase: path.resolve(__dirname, 'dist'),
    progress: true,
    inline: true,
    hot: true
  });
});

我的期望

当我运行 gulp start 时，我希望 webpack 开发服务器启动，允许我访问 localhost:3000/。这应该从我项目的/dist/文件夹中加载一个 index.html。到目前为止，一切都很好。我希望当我对文件(例如 app.jsx)进行更改时，更改将会存在。

实际发生了什么

我收到错误“[HMR] 热模块更换已禁用”，没有进一步的解释。

如有任何帮助，我们将不胜感激。我一直在尝试让热重载工作一整天。

Answer 1

在插件部分的 webpack.config.js 中试试这个，

plugins: [new webpack.HotModuleReplacementPlugin()]

我知道您在 gulp 任务中推送插件，但您必须在 cli 或 npm 脚本上使用 --hot --inline