Webpack-dev-server: How to make Hot Module replacement work with webpack node API?

[francoisromain]

Hello
Hot reload works fine with webpack in the cli, for example:

webpack-dev-server --inline --hot --config build/webpack.dev-cli.config

build/webpack.dev-cli.config.js:

var config = require('./webpack.base.config')

module.exports = merge(config, {
  entry: [
    './src/app.js'
  ],
  devServer: {
    historyApiFallback: true
  }
})

---

__Now, how to make HMR work with webpack node api?__

node build/dev.js

build/dev.js:

var config = require('./webpack.dev-api.config')

var compiler = webpack(config)
var server = new WebpackDevServer(compiler, {
  stats: {
    colors: true
  },
  hot: true,
  inline: true,
  publicPath: '/dist/',
  historyApiFallback: true
})

server.listen(8080, '127.0.0.1', function () {
  console.log('Project is running at http://localhost:8080')
})

build/webpack.dev-api.config.js:

var config = require('./webpack.base.config')

module.exports = merge(config, {
  devtool: 'source-map',
  entry: [
    './src/app.js',
    'webpack/hot/dev-server'
  ],
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
})

__HMR does not work.__
__[WDS] Hot Module Replacement enabled is not showing in the console__

I made a repo with this here: https://github.com/francoisromain/test-vue-hmr-nodeapi

Thank you

[francoisromain]

It works if we add 'webpack-dev-server/client?http://localhost:8080' as one entry

[wesleymostien]

for me, it just reloads the page every time instead of HMR. What could be the problem ?