webpack & gulp에서 핫 모듈 교체를 얻는 방법?

Question

reactjs 앱에 대한 꿀꺽 꿀꺽 마시 며 웹팩 구성을 설정했습니다. 이것은 REPO에 대한 링크입니다

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.config입니다

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); 
    }); 
}); 

: 이것은 내 gulpfile의 조각입니다 webpack-dev-server를 추가해야합니다. 반응성 핫 로더 플러그인

npm 반응성 핫 로더 설치 --save-dev

NPM --save-DEV 웹팩-dev에 서버를 설치

devServer의 설정을 추가 (contentBase이 파일이 제공되는 위치에서이다) 및 추가 '반응 핫'로더의 '바벨 로더'전

마지막으로 당신은이 옵션을 웹팩-dev에 서버를 실행해야합니다 : ERROR 멀티 주요 모듈에서 찾을 수 없습니다 : --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;