It is not Webpack Dev Server.
When you develop with React/Redux, to use hot-reload ability that powered by webpack-hot-middleware, usually you need to write a simple express server to provide hot-patch service. Now, I packed it as a module.
First, install the npm module.
npm install --save-dev webpack-devserver
Next, config webpack.config.js to enable hot reloading, See Webpack Hot Middleware.
-
Add the following three plugins to the
plugins
array:plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ]
-
Add
'webpack-hot-middleware/client'
into theentry
array. This connects to the server to receive notifications when the bundle rebuilds and then updates your client bundle accordingly. -
Optional, set publicPath.
Then, add a script into package.json.
"scripts": {
"dev": "webpack-devserver"
}
That's all, no more configuration required. Now, run this command to start DevServer.
npm run dev
and browse "http://127.0.0.1:8080/".
If you get some warning like "The following modules couldn't be hot updated", that is loss something. Please add
module.hot.accept();
to the top level file that initialized the application. See garysieling blog.
DevServer default listen on localhost:8080, to indicate another port and address, add
devServer: {
address: '111.111.111.111',
port: 3000
}
into webpack.config.js.
If want proxy some url to server "http://222.222.222.222:3000/", add
devServer: {
proxy: {
'/url/*': 'http://222.222.222.222:3000/'
}
}
into webpack.config.js.
This is my first npm module. Any help would be most welcome.