webpack-dev-server: Running the server does not compile files or reload page in windows.

Maybe webpack-dev-server compiles your code, but did not know when to send them to the browser. Also, webpack-dev-server stores the compiled bundle in memory, thus the old copy remains in the file system. That’s why your browser are always getting the old files.

Webpack-dev-server reads output.publicPath in the config. Whenever browser sends a request to get file under that path, it tries to return the compiled bundle.

If you access your bundle.js using <script src="/build/bundle.js"></script>, you may try the following in the CLI, which should be equivalent to setting up output.publicPath in a config file:

webpack-dev-server --output-public-path=/build/

I have found the solution for this on Vagrant shared folders:

# webpack-dev-server --watch-poll

Now my bundle will properly get rebuilt.

I had a similar problem on Windows. webpack-dev-server in one of the projects just wouldn’t react to changes to .js files. In the end the reason was quite stupid: you just can’t use certain symbols in a path to the project. For example, if there are braces there ((), []), the changes won’t be seen by webpack-dev-server; with an ! it won’t even start. Maybe there are more, just didn’t bother digging.

Hope someone finds this helpful.

you need to access it from http://host:port/webpack-dev-server/ and not from http://host:port/ to get it reloading the browser that or add --inline --hot

The closest I can get to what I want, is to run these in separate terminals

webpack --watch webpack-dev-server

Just followed the getting started tutorial. Webpack dev server does not reload the browser after recompiling. I’m on Win 10

It seems a common pattern with any node project. Things break apart even before finishing introduction.

Edit: Here’s what works for me: webpack-dev-server --progress --inline

if you only care about browser reload and don’t need to set up hot mode than follow this workaround:

1. remove ‘webpack/hot/dev-server’ from your entry object in wepack config, otherwise you will get this error in your browser console: [HMR] Hot Module Replacement is disabled.
2. in one terminal run webpack --watch
3. in second terminal run webpack-dev-server

That’s it. Now your browser should reload every time you modify something in your code. Hopefully this helps.

Depending on what editor you’re using, that could be causing the issue. Just found out that WebStorm was giving me this problem from Windows but not on Ubuntu (the settings must have been different on each).

The setting I had to disable which made all the difference was use "safe write" (found in Appearance & Behaviour > System Settings), which saves changes first to a temporary file. Saving like that doesn’t get picked up by webpack of course, was the cause of much frustration.

Also experienced this problem with webpack-hot-middleware on my own express-server.

Adding watchOptions to my webpack-dev-middleware-options solved this for me.

relevant part of my server.js:

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: webpackConfig.output.publicPath,
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  }
}));

Windows 10 - IntelliJ Ultimate (aka Webstrom) this solved it for me:

<< Depending on what editor you’re using, that could be causing the issue. Just found out that WebStorm was giving me this problem from Windows but not on Ubuntu (the settings must have been different on each).

The setting I had to disable which made all the difference was use “safe write” (found in Appearance & Behaviour > System Settings), which saves changes first to a temporary file. Saving like that doesn’t get picked up by webpack of course, was the cause of much frustration. >> Thanks to @lostpebble

Having the same problem due to Dropbox using () in its naming convention for Dropbox for Business accounts: ~/Dropbox (business name)/. Tried symlinking but webpack ignores the symlink and uses the original path.

While vbox shared folders update content they do not update the mtime of the file. If I touch the file on the guest machine it then reloads. I’m assuming inotify (or equivalent doesn’t pick up these changes). More active scanning or a vbox fix seem like the only route.

Closing because there are several answers to the problem. Some of these issues are also documented.

If anyone still has an issue, feel free to create a new issue.

@Kekesed I managed to get it working it appears that it was caused by the paths not being correct for Windows. Wrap any applicable paths in path.resolve and path.join should do the job.

Here’s the updated config feel free to clone my repo and test for yourselves.

Moved from OS X to Windows 10 and now webpack-dev-server is not detecting changes and rebuilding the bundle. I’m using Atom so there’s no safe write, so that shouldn’t be the problem.

I’ve attempted most solutions in this issue to no avail.

• Inline
• Hot
• Watch - Use Polling

Here’s my config see devServer.

change lazy option off
it works me win7 well!
my config :

{
    // webpack-dev-server options

    contentBase: path.join(__dirname,'build'),
    // or: contentBase: "http://localhost/",
    inline:true,
    hot: true,
    // Enable special support for Hot Module Replacement
    // Page is no longer updated, but a "webpackHotUpdate" message is send to the content
    // Use "webpack/hot/dev-server" as additional module in your entry point
    // Note: this does _not_ add the `HotModuleReplacementPlugin` like the CLI option does.

    // Set this as true if you want to access dev server from arbitrary url.
    // This is handy if you are using a html5 router.
    historyApiFallback: false,

    // Set this if you want to enable gzip compression for assets
    compress: true,

    // Set this if you want webpack-dev-server to delegate a single path to an arbitrary server.
    // Use "*" to proxy all paths to the specified server.
    // This is useful if you want to get rid of 'http://localhost:8080/' in script[src],
    // and has many other use cases (see https://github.com/webpack/webpack-dev-server/pull/127 ).
    /*proxy: {
        "*": "http://localhost:9091"
    },*/

    // pass [static options](http://expressjs.com/en/4x/api.html#express.static) to inner express server
    staticOptions: {
    },
    // webpack-dev-middleware options
    quiet: false,
    noInfo: false,
    //lazy: true,
    filename: "bundle.js",
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    },
    publicPath: "/assets/",
    headers: { "X-Custom-Header": "yes" },
    stats: { colors: true }
}

Well this is a popular issue.

I’m having the same issue. For now I’m running webpack-dev-server inside Vagrant.

UPDATE: not working on Vagrant, probably because it’s a shared folder :{

@QuantumInformation If you want it to live reload, you’ll need to setup hot mode as instructed here: http://webpack.github.io/docs/webpack-dev-server.html#hot-mode