A short-hand to establish a web server for hot reloading.
$ npm install --save-dev webpack-hot-middleware webpack-hot-server
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('webpack')
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.
MIT © EGOIST