webpack-hot-server

A short-hand to establish a web server for hot reloading.

Install

$ npm install --save-dev webpack-hot-middleware webpack-hot-server

Usage

First, setup webpack-hot-middleware in your webpack config, i.e. add to entry, push the plugin.

devServer.js

You are recommended to use html-webpack-plugin to generate custom HTML output, or this module will use default index.html.

const webpack = require('wenpack')
const webpackHotServer = require('webpack-hot-server')
const webpackConfig = require('./webpack.config')
 
const app = webpackHotServer({
  webpack,
  config: webpackConfig,
  hot: true, // use HMR
  customIndex: true // set when your are using `html-webpack-plugin`,
  // customIndex: '/directory/to/index.html',
  // filename: 'awkward.html',
  wrap(app) {
    app.use() // ... apply your logic or middleware
  },
  compiler: {} // webpack-dev-middleware compiler options
})
 
app.listen(port, () => {
    console.log(`Webpack Hot Server is running at http://lcoalhost:${port}`)
})

Using with React

To enable hot reloading for React components, install babel-preset-react-hmre and put the following code in your .babelrc file:

{
    "env": {
        "development": {
        	"presets": ["react-hmre"]
        }
    }
}

Then run NODE_ENV=development node devServer.js

Using with Vue

It has seamless integration with vue-loader, no additional setup if you use that.