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 "http://127.0.0.1:8080/".

Troubleshooting

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

module.hot.accept();

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

Config

Port and address of DevServer

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.

Proxy

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.

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