Как получить горячую замену модуля, работающую в webpack & gulp?

Question

У меня есть настройка gulp и webpack для приложения reactjs. Это фрагмент из моей gulpfile:

gulp.task('webpack-dev-server', function(callback) { 
    // modify some webpack config options 
    var myConfig = Object.create(webpackConfig); 
    myConfig.devtool = 'eval'; 
    myConfig.debug = true; 
    myConfig.plugins = [ 
     new webpack.HotModuleReplacementPlugin() 
    ]; 

    // Start a webpack-dev-server 
    new WebpackDevServer(webpack(myConfig), { 
     hot: true, 
     stats: { 
      colors: true 
     } 

    }).listen(9090, 'localhost', function(err) { 
     if (err) throw new gulpUtil.PluginError('webpack-dev-server', err); 
    }); 
}); 

Это мой webpack.config:

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    cache: true, 
    entry: ['webpack/hot/dev-server', './src/app.js'], 
    output: { 
     path: __dirname + '/src/js', 
     publicPath: '/src/', 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel' 
      } 
     ] 
    } 
}; 

Это ссылка на репо: https://github.com/dimitri-a/koekje

Answer 1

Для реагировать горячий загрузчик работать вам будет необходимо добавить webpack-dev-сервер & подключить плагин для горячего загрузчика

npm установить реактивный hot-loader --save-dev

НПМ установки WebPack-DEV-сервер --save-DEV

Добавить devServer конфигурации (contentBase откуда файлы будут обслуживаться) и добавить «реагируют докрасна» в загрузчике перед «Бабель-погрузчик»

Наконец, вам нужно запустить WebPack-DEV-сервер с 2-х вариантов: WebPack-DEV-сервер --hot --inline

var webpack = require('webpack'); 
var path = require('path'); 

/* 
* Default webpack configuration for development 
*/ 
var config = { 
    devtool: 'eval-source-map', 
    cache: true, 
    entry: ['webpack/hot/dev-server', './src/app.js'], 
    output: { 
     path: __dirname + '/src/js', 
     publicPath: '/src/', 
     filename: "bundle.js" 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: ['react-hot', 'babel-loader'], 
     query: { 
     presets: ['es2015','react'] 
     } 
    }] 
    }, 

    devServer: { 
    contentBase: "./src", 
    colors: true, 
    historyApiFallback: true, 
    inline: true 
    }, 
} 

module.exports = config;