Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack --watch does not work on Windows (nor webpack-dev-server)

It seems to be a common problem, but after a few days of active searching I didn't find any solution that works in my case.

  • windows7-x64
  • node: 6.3.0-x64 (also tried node-v4.4.7-x64)
  • npm: 3.10.3
  • webpack: 1.13.1
  • sublime text (not Vim)

First of all, I can't install fsevents on windows, which might be the problem, because it's the library for watching on OS X.

D:\file>npm install webpack
[email protected] D:\file
`-- [email protected]

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

So, if your --watch works on windows, please tell me, do you have the same issue with skipping fsevents when installing webpack?


Secondly, webpack --watch does compile the file, but it doesn't watch at all.

E.g. if I use stylus watch, then it actually blocks my command line until I press ctrl+c

D:\file>stylus -w style.styl  
watching C:/Users/...  
compiled style.css  
watching style.styl
_

And only after ctrl+c it will unblock my keyboard.

^CTerminate batch job (Y/N)? y

stylus-watch

While webpack -w is totally different. It's not just not compiling the file on changes, but it's also not watching at all. I mean that after typing the command webpack --watch it's compiling the file one time, but it doesn't lock my keyboard and so it allows me to write another command.

D:\webpa>webpack main.js bundle.js
D:\webpa>webpack -w main.js bundle.js
D:\webpa>webpack --watch main.js bundle.js
D:\webpa>

webpack-watch

The same with webpack-dev-server - it starts server, but then immediately finishes it.

D:\webpa>webpack-dev-server --hot --inline
http://localhost:8080/
webpack result is served from /
content is served from D:\webpa
D:\webpa>

It looks like the problem is not with webpack.config.js, because it doesn't watch even with a command like webpack --watch main.js bundle.js, but anyway, here is my basic config.

var webpack = require('webpack');
module.exports = {
  context: __dirname,
  entry: "./main.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
};

And I've tried many other variants:

var webpack = require('webpack');
var path = require('path');
var entry = path.join(__dirname, "main.js");
var WebpackNotifierPlugin = require('webpack-notifier');

module.exports = {
  context: __dirname,
  entry: entry,
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  resolve: {root: [__dirname]},
  resolve: { fallback: path.join(__dirname, "node_modules") },
  resolveLoader: { fallback: path.join(__dirname, "node_modules") },
  plugins: [
    new webpack.OldWatchingPlugin(),
    new WebpackNotifierPlugin(),
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
    ),
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors/js/applibs.js'),
    new webpack.optimize.DedupePlugin()
  ]
};

As I said, the problem seems to be not in webpack.config.js


I've also tried things like:

echo fs.inotify.max_user_watches=524288
webpack-dev-server --content-base ./ --port 9966 --hot --inline
webpack --watch --watch-poll
rename/move/create new folder, reinstall node.js and webpack

So yeah, if you had this issue and you resolved it, please share some info.

  • Did you have problems with installing fsevents?
  • Was your webpack --watch command blocking your keyboard and actually watching, but just not compiling files after changes? Or was it finishing watching immediately like in my case?
  • Any other suggestions what to use apart from --watch and webpack-dev-server?

Thanks!

like image 506
SamAI Avatar asked Jul 15 '16 13:07

SamAI


2 Answers

I'll include this here because it fixed my issue. It may or may not fix yours, depending on if your paths in your post are actually the paths you're using. If it doesn't resolve your issue, at least it'll solve somebodies cause this question comes up first thing for this issue.

You can't have a path with "(" or ")" in it, because the is-glob dependency thinks it's a glob if you do. If you must put your project in a path with "(" (like Program Files (x86)), then you must add something like this to your is-glob module in node_modules:

  if (typeof str === 'string' && str.indexOf('Program Files (x86)') > -1)
     return false
like image 99
Joren Avatar answered Sep 29 '22 23:09

Joren


Have a look at using fswatch. I find myself in the same mess. Windows/Linux cannot support fsevents considering its strictly for OSX. Support for Linux, for example, is through inotify.

It seems fswatch provides a cross-platform filesystem monitor, so you should be all set if you use with your windows machine.

like image 36
ddaaggeett Avatar answered Sep 29 '22 23:09

ddaaggeett