Running the server does not compile files or reload page in windows.

[quantuminformation]

From the docs it says:

It binds a small express server on localhost:8080 which serves your static assets as well as the bundle (compiled automatically). It automatically updates the browser page when a bundle is recompiled (socket.io). Open http://localhost:8080/webpack-dev-server/bundle in your browser.

However if I run it this doesn't happen: I just get the following, but when I go to the serving URL I still have my old code.

C:\Users\Laptop\WebstormProjects\wirejs-client>npm run start

> wirejs-client@0.1.0 start C:\Users\Laptop\WebstormProjects\wirejs-client
> webpack-dev-server

http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from C:\Users\Laptop\WebstormProjects\wirejs-client
webpack: wait until bundle finished: /webpack-dev-server/
Hash: 25bf81a3ab16cfec1760
Version: webpack 1.8.4
Time: 8688ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  4.37 kB       0  [emitted]  main
bundle.js.map     4 kB       0  [emitted]  main
chunk    {0} bundle.js, bundle.js.map (main) 2.69 kB [rendered]
    [0] ./app/main.js 295 bytes {0} [built]
    [1] ./app/wirejs-client.js 2.39 kB {0} [built]
webpack: bundle is now VALID.

[quantuminformation]

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

webpack --watch webpack-dev-server

[MrOrz]

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/

[jasonmacdonald]

Same here, I get neither change detection or window reloading. It doesn't recompile on changes, and doesn't reload the browser. No errors. :(

I can't get "webpack --watch" to do detect changes either

[quantuminformation]

@MrOrz thanks but I still have to manually refresh the page.

[MrOrz]

@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

[chiefjester]

same issue here, it works in osx, same config doesn't work on windows 8.1. I was having problem when using the hash option, it started working if I just use bundle.js without a hash.

[rictorres]

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 :{

[rictorres]

Using Webpack inside Vagrant on a non-shared folder works fine.

[quantuminformation]

@MrOrz thanks that works, however on windows chrome keeps crashing :(

[quantuminformation]

Closing anyway as the hot mode acheives what I need, however it seems like a lot of extra config to me.

[luiz-gustavo-agostinho]

@rictorres I have the same here over Vagrant with shared folder. Have you found a way?

[kzima]

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.

[rictorres]

@agostlg I'm running Webpack through Gulp :)

[hyzhak]

doesn't recompile and doesn't reload. I'm using shared folders in Vagrant

[scott2449]

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.

[quantuminformation]

Shall I reopen this?

[alexsandro-xpt]

Same problem here I'm using Windows 8.1 and Gulp.

In Web Development Tools at Chrome in Network tab, the websocket only in pending status and return 0 bytes of size.

[alexsandro-xpt]

I don't know, but now its working now for me at Windows 8.1... feel free to see https://github.com/alexsandro-xpt/DemoWebPackAngularGulp

[pvasek]

I had the same issue. The reason was that I built the output files with webpack first and than try to run the dev server. It seems that in my configuration the dev server served the files from disk no matter that in memory was something else (I could see reinvalidating bundles after changes). After removing these files from disk everything started to work again.

[Jakobud]

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

# webpack-dev-server --watch-poll

Now my bundle will properly get rebuilt.

[finbarmaginn]

webpack-dev-server --watch-poll works for us on win 8.1

[dryoma]

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.

[nathanborror]

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.

[fireproofsocks]

Same problem... none of the above solutions have worked for me, and eliminating the caveats (e.g. Dropbox) has also not gotten the behavior to work as expected.

[vianvio]

By using --hot, you need to specify the output.publicPath in your webpack.config.js file. ie. if you have ./build/bundle.js, you need to set output.publicPath as '/build/'. Then it will auto recompile and reload the page. Hope this helps

[oliverjanik]

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

[ocombe]

Thanks @Jakobud, it works with --watch-poll. The reason is (I suspect) that my vagrant VM is a debian, but my shared folder is on windows. The watchers for Linux don't work on windows files (it's also why symlinks won't work in this shared folder), but watch poll works because it checks every x ms if a file changed. It consumes more memory, but at least it works :)

[quantuminformation]

Well this is a popular issue.

[rictorres]

Indeed!

[adam-beck]

@rictorres when you said

Using Webpack inside Vagrant on a non-shared folder works fine.

Are you using gulp for that as well? I'm using the dev middleware and the changes are not recognized even if the file is outside of a shared folder. However, I am not using gulp.

[ghost]

Hi everyone, Does anyone know if webpack-dev-server work and reload correctly on Linux? I'm about to switch to a linux distribution because of this specific issue so it would be great it someone could confirm it. Thank you, Alvin

[ocombe]

Yes it does (but it also works on windows with --watch-poll)

[wmira]

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

[ghost]

Hi, Thanks guys for the replies, we're using the node version of the server and not the command line client, so are there any configuration options that equal to --watch-poll and/or --inline--hot From a quick read at the docs, it looks like the watch and hot options do exist, but I'm not sure if they do the same thing ? Like so:

var server = new WebpackDevServer(compiler, {
  hot: true, // is this is the same as specifying --inline --hot?
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000 // is this the same as specifying --watch-poll?
  },
});

server.listen(8080, "localhost", function() {});

Thanks a million! I might not have to switch to linux after all.

[joshgeller]

@alvinsight I'm in the same boat as you, adding the watchOptions config entry solved the problem. Thanks!

[ghost]

Hey @joshgeller and other people who managed to get this to work on windows, would you mind sharing the options that you passed to the WebpackDevServer constructor ? I just tried this and a lot of other stuff and nothing works :/ I'm on windows 10 (not sure if it makes any difference). Thank

[ocombe]

You can look at my starter: https://github.com/ocombe/ng2-webpack I just add --watch-poll to the npm commands when I have to run it from linux with my shared folder on windows. If I run it from windows (10) I don't have to change anything to make it work.

[ghost]

@ocombe Thanks, your started is really big though, would you mind sending me an e-mail so we can talk in private ? I'm still failing unfortunately :(

[quantuminformation]

Man I'm tempted to unsubscribe from my own thread ;)

[mikhail-eremin]

Doesn't work on windows 10, tried all possible configs

[mrdrozdov]

Not working for me on mac + vagrant + nfs :(

[maikokuppe]

I'm using Ubuntu 14.04. None of the solutions above helped me until I found out that the context in my config was wrong

// Wrong (relative path)
module.exports = {
  context: './app',
  // rest of config
}

// Correct (absolute path)
module.exports = {
  context: process.cwd() + '/app',
  // rest of config
}

I hope this helps someone not wasting hours into that issue like I did.

[hannuraina]

removing hot: true worked for me. win 10 here.

devServer: {
    contentBase: path.resolve(pkg.config.buildDir),
    noInfo: false,
    inline: true
  }

[xtreemrage]

@oliverjanik It worked for me, with windows 10 and chrome 49, thanks.

And I can access my web-app just via this route: http://localhost:8080. The full command for me is, webpack-dev-server --progress --colors --inline --content-base app/.

"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"

btw I use intellij and I didn't needed to disable safe writing option for my IDE.

[daaaniel]

Do you have tried with the webpack-livereload-plugin? This did the trick for me.

[skyujilong]

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 }
}

[yonixw]

Just want to say that a solution that worked for me was to use git bash for windwos. Running the watcher from there worked perfectly.

Win 7 64 Bit

[NickSevens]

Hi, I've got the same issue (I think) on Windows 10. Tried running in git bash, but without success...

Edit: fixed it by adding windows-style path separators to devServer.contentBase property:

module.exports = {
  devServer: {
    contentBase: '.\\src\\'
  }
}

[dqisme]

Awesome! Works fine on Windows 10. by the way, it is recommended that using path.join for cross-platform to deal with all the path stuff.

[NickSevens]

Indeed. Changed it to that afterwards :) made it easier for cross platform dev.