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

[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

[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

[jshbrntt]

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()
]

[jshbrntt]

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