Why doesn't webpack-dev-server refresh the page on changes?

Question

JavaScript

Good day. I work locally with webpack-dev-server, as I collect everything with webpack for production. When I start the server with --inline --hot --progress mods for development, it starts fine at localhost:8080 , but when I make changes to the files, the server doesn't recompile the application and I have to restart it. Tell me why is that? How to auto-recompile files when changing code?
Here is package.json:

{
  "name": "angular2-starter",
  "version": "0.2.5",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/mirkonasato/angular2-course-webpack-starter.git"
  },
  "private": true,
  "scripts": {
    "build": "webpack --progress",
    "build:prod": "cross-env APP_ENVIRONMENT=production webpack -p --progress",
    "postinstall": "typings install",
    "serve": "webpack-dev-server --inline --hot --progress"
  },
  "dependencies": {
    "@angular/common": "2.2.3",
    "@angular/compiler": "2.2.3",
    "@angular/compiler-cli": "2.2.3",
    "@angular/core": "2.2.3",
    "@angular/forms": "2.2.3",
    "@angular/http": "2.2.3",
    "@angular/platform-browser": "2.2.3",
    "@angular/platform-browser-dynamic": "2.2.3",
    "@angular/platform-server": "2.2.3",
    "@angular/router": "3.2.3",
    "core-js": "2.4.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ngtools/webpack": "1.1.9",
    "angular2-perfect-scrollbar": "^1.1.0",
    "angular2-template-loader": "0.6.0",
    "cross-env": "3.1.3",
    "enhanced-resolve": "3.0.0",
    "html-webpack-plugin": "2.24.1",
    "raw-loader": "0.5.1",
    "rimraf": "2.5.4",
    "ts-loader": "1.3.0",
    "typescript": "2.0.10",
    "typings": "2.0.0",
    "webpack": "2.1.0-beta.27",
    "webpack-dev-server": "^2.1.0-beta.12"
  }
}

Here is webpack.config.js:

var webpack = require('webpack');
var ngToolsWebpack = require('@ngtools/webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var appEnvironment = process.env.APP_ENVIRONMENT || 'development';
var isProduction = appEnvironment === 'production'; 

var webpackConfig = {

  entry: {
    'app': './src/main.ts',
    'polyfills': [
      'core-js/es6',
      'core-js/es7/reflect',
      'zone.js/dist/zone'
    ]
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].js'
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: isProduction ? '@ngtools/webpack' : ['ts-loader', 'angular2-template-loader'] },
      { test: /\.html$/, loader: 'raw-loader' },
      { test: /\.css$/, loader: 'raw-loader' }
    ]
  },
  resolve: {
    extensions: [ '.js', '.ts', '.html', '.css' ]
  },
  plugins: [
    // see https://github.com/angular/angular/issues/11580
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      './src'
    ),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'polyfills'
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new webpack.DefinePlugin({
      app: {
        environment: JSON.stringify(appEnvironment)
      }
    })
  ],
  watch: true
  
};

if (isProduction) {
  webpackConfig.plugins.push(new ngToolsWebpack.AotPlugin({
    tsConfigPath: './tsconfig.json',
    entryModule: './src/app/app.module#AppModule'
  }));
}

module.exports = webpackConfig;

Here is the project structure: prntscr.com/dmoawf

Answer 1

Perhaps you should not specify watch: true in the config, but add --watch on the command line