Webpack-dev-server: 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

> [email protected] 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

[thisguychris]

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.

[agostlg]

@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.

[alvinometric]

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

[alvinometric]

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!

[alvinometric]

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.

[alvinometric]

@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.

[ghost]

Thanks @nathanborror for your hint about the Dropbox for Business's path convention, that solved it for me.

[eromoe]

A project I used has below code

const path = require('path');
const express = require('express');
const webpack = require('webpack');
const config = require('./webpack.config.dev');

const app = express();
const compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

It use npm run dev to start, hot reload work on windows 8.1 but windows 7
What's the problem?
I don't know much about webpack, ..

[rajyavardhanp]

webpack-dev-server --content-base *** --inline --hot
** >> should be your output folder
./dist or wherever you are building the output

If you don't want to reload the page every time, for most platforms localhost:8080 is enough, else check in localhost:8080/webpack-dev-server/index.html

[Ajaybhardwaj7]

Here is the sample working app which I have created after two days of struggle. I have used the webpack dev server API method. https://github.com/Ajaybhardwaj7/webpack-react-sample

[blackhawk389]

@QuantumInformation I have successfully launched recompiled file(not manually refresh), how? seting path to dist folder and devServer: { contentBase: "./dist", }, doing this

[joshua-barnett]

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.

[Kekesed]

same here, i have the exact same problem with @synthecypher

[lostpebble]

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.

[amcdnl]

I can't get it to work either, everything loads fine but upon refresh auto or even manual it does not reflect updates. My config is: https://github.com/swimlane/angular2-data-table/blob/master/webpack.config.js

[AurelioDeRosa]

I've had the same problem with webpack 1.13.1 and webpack-dev-server 1.14.1 on Windows 10. Adding the following code to the webpack.config.js file solved the issue:

plugins: [
   new webpack.OldWatchingPlugin()
]

[joshua-barnett]

@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.

[cooervo]

This is what worked for me in windows 10:

//Webpack.config.js file:

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: path.join(__dirname, '/src/'),
    publicPath: '/src/', // instead of publicPath: '/build/'
    filename: 'client.min.js'
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

Go to cmd and type: webpack-dev-server --watch-poll

This is my dir structure:

In browser go to: http://localhost:8080/webpack-dev-server/

[sushicutta]

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

[SpaceK33z]

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.

[alb3rto269]

This might be related to: https://github.com/webpack/webpack-dev-server/issues/324
The solution posted in that other issue solved my problem.

[fazalrasel]

Those using Polling, watch for RAM use...

[An-Dang]

I used Intellij 2016.2.3 on Win1 and I've also solved the problem with ctrl + s.

[awesomund]

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

[dharmesh-khandelwal]

@dryoma Thank You!! I removed () from the folder name, and live reloading works :)

[CocaCola183]

@wmira Save my life

[jartaud]

@awesomund works for me. Vue Cli webpack, Laravel Homestead, Win10,

[Kielan]

Crazy this issue has been closed a year ago, tons of people on many machines still have it, and no solution by authors. On osx and have the same problem.

I know one could say "it's open source you should fix it"

[SpaceK33z]

There is not really a clear issue here, various people have posted their various issues here. If you still have a problem with reloading, please create a new issue and fill in all details. Locking this thread.