Not rebuilding/rebundling automatically

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?

[ivanm376]

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

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