webpack-dev-server does not watch for my file changes

Question

When I change my files while webpack-dev-server is running, the bundle's files are not updated. Here are my webpack.config.js and package.json files, as you can see from my npm script, I've solved running webpack watch and webpack-dev-server in the same command (npm run watch & webpack-dev-server --content-base ./ --port 9966):

webpack.config.js:

'use strict';

var ReactStylePlugin = require('react-style-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var webpack = require('webpack');

module.exports = {
    devtool: 'sourcemap',
  entry: ['./js/main.js'],
  output: {
    filename: 'bundle.js',
    path: __dirname + '/assets',
    publicPath: __dirname + '/'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [
          ReactStylePlugin.loader(),
          'jsx-loader?harmony'
        ]
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('css-loader')
      }
    ]
  },
  plugins: [
    new ReactStylePlugin('bundle.css'),
    new webpack.DefinePlugin({
      'process.env': {
        // To enable production mode:
        //NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

package.json:

{
  "name": "reactTest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "build": "webpack",
    "web": "npm run watch &  webpack-dev-server --content-base ./ --port 9966"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.10.1",
    "extract-text-webpack-plugin": "^0.3.8",
    "jsx-loader": "^0.13.1",
    "react-style-webpack-plugin": "^0.4.0",
    "style-loader": "^0.10.2",
    "url-loader": "^0.5.5",
    "webpack": "^1.8.5",
    "webpack-dev-server": "^1.8.0"
  },
  "dependencies": {
    "react": "^0.13.1",
    "react-style": "^0.5.3"
  }
}

my directory structure is:

assets  
  bundle.css
  bundle.css.map    
  bundle.js 
  bundle.js.map 
js
  AppActions.js
  Profile.css.js
  ProfileList.js
  main.js
  AppConstants.js
  AppStore.js       
  Profile.js
  ResultPage.js     
package.json
index.html
node_modules
webpack.config.js

every file inside assets directory is generated by webpack

score 43 · Answer 1 · answered May 22 '16 at 20:05

In order to get webpack to watch my file changes (Ubuntu 14.04), I had to increase the number of watchers (I had increased the number before, but it was still too low):

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Source in the official docs: https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers

I first suspected the cause to be fsevents which doesn't work on Ubuntu, but this apparently wasn't the case.

Furthermore, because now the watching and re-compiling worked, but the automatic browser refresh part didn't work, I added the --inline param to the answer of @deowk which enables the "inline mode": webpack-dev-server --content-base ./ --port 9966 --hot --inline

Quote from the official docs: "The easiest way to use Hot Module Replacement with the webpack-dev-server is to use the inline mode." Source: https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement

This is correct answer for my case. I am on Ubuntu 18.04 and only this solution worked. — smupyknight, Feb 09 '19 at 13:26
Increasing max user watches solved issue for me. Manjaro 18.1.0-rc8 — menfon, Aug 19 '19 at 07:09

score 40 · Accepted Answer · edited Jun 20 '20 at 09:12

40

you need to run webpack-dev-server with the --hot flag:

webpack-dev-server --content-base ./ --port 9966 --hot

Then you can access the hot-loading version localhost:9966/webpack-dev-server/

You don't need to run watch as well.

update:

This entry in your webpack config must change:

entry: ['./js/main.js'], --> entry: ['webpack/hot/dev-server' , './js/main.js']

Change your publicPath entry:

publicPath: '/assets/'

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 19 '15 at 18:01

deowk

4,064
1
22
31

it was my first attemp. if I put this on my webpack conf file: "web": "webpack-dev-server --content-base ./ --port 9966 --hot" and I open my browser on http://localhost:9966/webpack-dev-server/, if I change something, I see the phreses "App updated, recompiling.." and then "App hot update.", but I can see my modification. If I stop and restart the server, I still don't see the modification. If I run "npm run watch" or "npm run build" and then I run the server, I see them correctly. – Jurgo Boemo Apr 19 '15 at 22:13
Ok let's see if we can figure out what you problem is, can you update your question to show me your directory structure - I want to check if your content-base setting is correct. It sounds like your bundle is not even getting loaded in webpack-dev-server. – deowk Apr 20 '15 at 06:51
Voted this up as the amended 'entry' line is what fixed things for me.Prior to that I had the same issue - the change was detected, the command line looked like it worked, the browser showed the 'app updated', but then no reload actually happened. – Dave Jul 20 '16 at 00:24
As soon as I update my main.js in entry, the page is being refreshed but the changes hasn't been occured on the page. Recompilation by `webpack-dev-server` doesn't affect, I stop server, run `webpack` again and then run `web-pack-server` as well and after that the change occurs. Is this normal or am I missing something? – ibubi Mar 14 '17 at 14:03

score 15 · Answer 3 · answered May 31 '17 at 12:24

15

@funkybunky identified the right problem but (IMHO) fixed it the wrong way. At least in my case, webpack was trying to watch every file it used, including a deep chain of thousands of files of dependencies pulled from npm. I added this to my config, per the docs:

devServer: {
  watchOptions: {
    ignored: /node_modules/
  }
}

Of course you legitimately could have thousands of files that might need to be watched, in which case go ahead and raise the limit, but you're probably better off ignoring vendor libraries that aren't likely to change.

answered May 31 '17 at 12:24

Coderer

21,290
22
71
124

did you mean to quote /node_modules/ ? – vidstige Sep 16 '17 at 12:43
1

I did not. If any path has "node_modules" anywhere in it, I definitely don't want to watch that path. That's why I specified a regex instead. – Coderer Sep 18 '17 at 12:58

score 5 · Answer 4 · answered Sep 14 '16 at 18:06

I'll put this here just in case it helps anyone. My problem was the same, but caused by inconsistent capitalization of directory names and webpack alias declaration.

I had a WebGL directory which i referenced in my aliases as webgl, and unfortunately this worked for the build, but didn't work for code watching.

score 0 · Answer 5 · answered Aug 31 '17 at 08:47

0

In my case, the error was caused by an empty space in the directory name, by changing "Repository Name" by "RepositoryName", everything worked fine !

answered Aug 31 '17 at 08:47

JC.b

13
4

webpack-dev-server does not watch for my file changes

5 Answers5

update:

Linked