Webpack - [HMR]热模块更换已禁用

时间:2016-09-08 23:37:56

标签: javascript reactjs webpack hot-module-replacement

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

我无法使用webpack或webpack dev-server的命令行;我被限制使用Node API。

以下是我使用网络包的方式。

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 dev服务器能够启动,允许我点击localhost:3000 /。这应该从我的项目的/ dist /文件夹中加载index.html。到现在为止还挺好。我希望当我对文件进行更改(例如,app.jsx)时,会发生更改。

实际发生的事情

我收到错误“[HMR]热模块更换被禁用”,没有进一步说明。

任何帮助将不胜感激。我一直试图让热重装工作一整天。

2 个答案:

答案 0 :(得分:1)

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

plugins: [new webpack.HotModuleReplacementPlugin()]

我知道你正在推动你的gulp任务中的插件,但你必须在cli或你的npm脚本上使用--hot --inline

答案 1 :(得分:0)

尝试运行webpack as packge.json中的webpack-dev-server --hot --inline, 不知怎的官方文档现在错了。