Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including webpack-devserver with all npm packages installed. Try it out:

var webpackDevserver = require("webpack-devserver")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

webpack-devserver v0.0.6

Serves a webpack app. Updates the browser on changes.

Webpack DevServer

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.

Installation & Usage

First, install the npm module.

npm install --save-dev webpack-devserver

Next, config webpack.config.js to enable hot reloading, See Webpack Hot Middleware.

  1. Add the following three plugins to the plugins array:

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
  2. Add 'webpack-hot-middleware/client' into the entry array. This connects to the server to receive notifications when the bundle rebuilds and then updates your client bundle accordingly.

  3. 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 "".


The following modules couldn't be hot updated

If you get some warning like "The following modules couldn't be hot updated", that is loss something. Please add;

to the top level file that initialized the application. See garysieling blog.


Port and address of DevServer

DevServer default listen on localhost:8080, to indicate another port and address, add

devServer: {
    address: '',
    port: 3000

into webpack.config.js.


If want proxy some url to server "", add

devServer: {
    proxy: {
        '/url/*': ''

into webpack.config.js.

At last

This is my first npm module. Any help would be most welcome.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free