Webpack-dev-server: Not rebuilding/rebundling automatically

[lukejagodzinski]

Hi, I'm trying to use webpack-dev-server to have hot code reloads but without a success. I'm 100% sure that I've configured everything correctly. I've tried many different approaches but my project does not get rebuild and bundled automatically. I have to run webpack by hand to generate/bundle correct code.

Here is my webpack.config.js file:

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

module.exports = {
  context: __dirname,
  devtool: debug ? 'inline-sourcemap' : null,
  entry: './js/main.js',
  module: {
    loaders: [{
      test: /.js?$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react', 'stage-0'],
        plugins: [
          // Static class properties.
          'transform-class-properties',
          // Share Babel helpers among files - smaller file size.
          'transform-runtime'
        ]
      }
    }]
  },
  output: {
    path: __dirname + '/js',
    filename: 'main.min.js'
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      mangle: false,
      sourcemap: false
    })
  ]
};

And packages.json

{
  "name": "NextGen",
  "version": "1.0.0",
  "scripts": {
    "start": "./node_modules/.bin/webpack-dev-server --port 3000 --inline --hot"
  },
  "author": "Łukasz Jagodziński",
  "license": "ISC",
  "dependencies": {
    "react": "^15.3.1",
    "react-dom": "^15.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-class-properties": "^6.11.5",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.11.6",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.0"
  }
}

It does not matter if I go to http://localhost:3000/ or http://localhost:3000/webpack-dev-server/. When I make a change I get info in the console that correct files were updated but browser does not refresh. What is even worse it also does not update to the new state when I refresh it by hand. So I've checked if the output file is correctly generated. And it's not. I have to run webpack command by hand and refresh browser. My on OS X El Capitan 10.11.6. Have anyone experienced such a problem?

[lukejagodzinski]

It's very strange but I've changed directories structure and it started working. I'm not 100% sure what's the source of the problem but maybe you can help me with that. I've changed directories structure from:

js/components/Header.js
js/components/Layout.js
js/main.js
js/main.min.js
index.html
package.json
webpack.config.js

to

src/js/components/Header.js
src/js/components/Layout.js
src/js/main.js
src/js/main.min.js
index.html
package.json
webpack.config.js

It seems to be cosmetic change but it started working and I don't know actually why. Are there any prerequisites if it goes about directories structure?

[ova2]

I have the same problem. --hot option doesn't work. My configuration is here https://github.com/ova2/bpmn-editor-poc/blob/master/package.json I start the server as

"webpack-dev-server --config config/webpack.dev.js --inline --open"

for now. The full page is refreshed on changes. But I want to enable HRM. Well, it gets enabled with the --hot option. I can see [WDS] Hot Module Replacement enabled but then it says on changes "Everything is up-to-date" and nothing happens.

My configs are here https://github.com/ova2/bpmn-editor-poc/tree/master/config

[SpaceK33z]

@jagi, webpack-dev-server does not have any prerequisites about the directory structure. However, what probably happened was that the "build" files were used because they had the same name.

By default, webpack-dev-server has contentBase set to process.cwd() when using the CLI. This means that files in your working directory are also served. This can have a side-effect when you've already built your bundle using webpack, because it will load those files. If you don't use contentBase, you can use --no-content-base. If you do want to use it, make sure the path to the built files and the path to the in-memory files is not the same.

[misoul]

I have the same issue, and apparently it was due to some proxies caching. Not webpack's issue.

From stackoverflow:
"
If you use some kind of an proxy, that would be the problem. Some proxies cache frequently used files (usually only .js, .css etc., but usually not .html) and ip addresses. If the server is on your local computer, try to use localhost or 127.0.0.1 instead of an ip address, so the request doesn't go trough the proxy. If it's not you have to configure or disable the proxy to access the newest version of the website. I don't know how common this is but, it would be the problem.
"

[tmansi1795]

unable to rebuild my project. this is happening after updated my package.json versions .
Can anyone help me with the possible solutions.

[Randy1Burrell]

Having this issue too

[farizluqman]

Any updates on the solution?

[fralonra]

Same issue. I solved it by running webpack in production mode once.

[ivanm376]

possible problem for Linux users see https://webpack.js.org/configuration/watch/#not-enough-watchers

[HualiangLI]

Actually, setting devServert.contentBase to false works.
The document helps a lot.

[GregorioF2]

possible problem for Linux users see https://webpack.js.org/configuration/watch/#not-enough-watchers

Amaizing, it worked perfectly for me

[renatasva]

Setting output.publicPath to my build folder in webpack config fixed the problem. Found the solution in another issue.