Webpack Dev Server with React Hot Loader

Question

I have a webpack configuration that works perfect in itself. I'm trying to install React Hot Loader together with HMR as suggested, which require webpack-dev-server. Here I cannot get it to work. I can not find where my bundle is located. I want it to be just at localhost:3000.

My webpack.config.js:

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

module.exports = {
  watch: true,

  devtool: 'eval',

  // entry: './src/main.js', This runs just for webpack bundling

  entry:[
    'webpack-dev-server/client?http:localhost:9000', // WebpackDevServer host and port
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    './src/main.js' // Your appʼs entry point
  ],

  output: {
    path: path.resolve(__dirname, 'public', 'dist'),
    filename: 'main.js'/*,
    publicPath: '/dist/'*/
  },

  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel-loader?cacheDirectory=true,presets[]=react,presets[]=es2015'],
      exclude: function(path) {
        var isModule = path.indexOf('node_modules') > -1;
        var isJsaudio = path.indexOf('jsaudio') > -1;

        if (isModule && !isJsaudio) {
          return true;
        }
      }
    }, {
      test: /\.json$/,
      loader: "json-loader"
    }]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],

  resolve: {
    extensions: ['', '.js', '.json', 'index.js'],
    root: [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'node_modules'),
      path.resolve(__dirname, 'node_modules', 'jsaudio', 'src')
    ]
  },

  target: 'web',

  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

And the webpack-server.js:

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
    publicPath: '/dist/',
  hot: true,
  historyApiFallback: true
}).listen(9000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Listening at http://localhost:9000/');
});

Update: The linked question does not help, especially since it does not even have a confirmed answer.

Possible duplicate of Webpack Dev Server (webpack-dev-server) Hot Module Replacement (HMR) Not Working — Shubham Khatri
– Shubham Khatri, Commented Aug 30, 2016 at 11:47
The linked question does not help, especially since it does not even have a confirmed answer. — Emo
– Emo, Commented Sep 1, 2016 at 9:37

peter.mouland · Accepted Answer · 2016-09-15 09:41:45Z

1

I would suggest trying out react-hot-loader v3 as the updates to get hot-reloading working have been simplified (in my opinion!).

in webpack then try point now only needs:

entry: {
    app: [
        'react-hot-loader/patch',
        'webpack-hot-middleware/client',
        `${SRC}/client-entry.js`
    ]
}

here is a link to an example app, react-lego that i've created to help people add react-hot-loader v3 to their apps. hope it helps

answered Sep 15, 2016 at 9:41

peter.mouland

1,98317 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack Dev Server with React Hot Loader

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related