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任务“start”中

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]热模块替换已禁用”，没有进一步的解释。

任何帮助都将不胜感激。我已经尝试了一整天才使热重载起作用。

- coolpic.jpg.exe

Answer 1

尝试在package.json中运行webpack作为"webpack-dev-server --hot --inline"，不知何故官方文档现在有误。

- Arif Dewi

Answer 2

在您的webpack.config.js文件中的插件一节尝试使用以下内容：

plugins: [new webpack.HotModuleReplacementPlugin()]

我知道你正在在gulp任务中使用插件，但你需要在cli或npm脚本中使用--hot --inline

- David