title: Webpack: How to setup webpack-dev-server and Hot Reload
body: <p>I would like to have <strong>Hot Reloading</strong> when I run the <code>npm run watch</code> command. (I would like it to work as it is working when using the <strong>vue-cli</strong> - when you run the <code>npm run dev</code> command: <a href="https://vue-loader.vuejs.org/en/features/hot-reload.html" rel="noreferrer">https://vue-loader.vuejs.org/en/features/hot-reload.html</a>).</p>
  
  <p>So, I've installed <strong>webpack-dev-server</strong> and this what I've tried:</p>
  
  <p><strong>package.json</strong>:</p>
  
  <pre><code>{
    "name": "webpack-learning",
    "version": "1.0.0",
    "description": "",
    "scripts": {
      "dev": "cross-env NODE_ENV=development webpack",
      "watch": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
      "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "babel-core": "^6.24.1",
      "babel-loader": "^7.0.0",
      "babel-preset-es2015": "^6.24.1",
      "cross-env": "^5.0.0",
      "css-loader": "^0.28.1",
      "extract-text-webpack-plugin": "^2.1.0",
      "file-loader": "^0.11.1",
      "node-sass": "^4.5.2",
      "purifycss-webpack": "^0.6.2",
      "sass-loader": "^6.0.5",
      "style-loader": "^0.17.0",
      "webpack": "^2.4.1",
      "webpack-dev-server": "^2.4.5"
    }
  }
  </code></pre>
  
  <p>If you look at the <code>"watch"</code> script - it uses <strong>webpack-dev-server</strong> and it also has <code>--open --hot</code> - this is the same as in <strong>vue-cli's package.json</strong>.</p>
  
  <p>Also, here is my <strong>webpack.config.js</strong>:</p>
  
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  const glob = require('glob');
  const ExtractTextPlugin = require("extract-text-webpack-plugin");
  const PurifyCSSPlugin = require('purifycss-webpack');
  var inProduction = (process.env.NODE_ENV === 'production');
  
  module.exports = {
      entry: {
          app: [
              './src/js/main.js',
              './src/sass/app.scss'
          ]
      },
      output: {
          path: path.resolve(__dirname, './dist'),
          filename: '[name].js'
      },
  
      module: {
          rules: [
              {
                  test: /\.s[ac]ss$/,
                  use: ExtractTextPlugin.extract({
                      use: ['css-loader', 'sass-loader'],
                      fallback: 'style-loader'
                  })
              },
              {
                  test:  /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
                  loader: 'file-loader',
                  options: {
                      name: '[name].[ext]?[hash]'
                  }
              },
              {
                  test: /\.css$/,
                  use: ['style-loader', 'css-loader']
              },
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  loader: "babel-loader"
              }
          ]
      },
  
      plugins: [
          new ExtractTextPlugin('[name].css'),
  
          new PurifyCSSPlugin({
              paths: glob.sync(path.join(__dirname, 'index.html')),
              minimize: inProduction
          }),
  
          new webpack.LoaderOptionsPlugin({
              minimize: inProduction
          })
      ],
  
      devtool: '#eval-source-map'
  };
  
  if (inProduction) {
      module.exports.devtool = '#source-map';
  
      module.exports.plugins.push(
          new webpack.optimize.UglifyJsPlugin({
              sourceMap: true,
              compress: {
                  warnings: false
              }
          })
      );
  }
  </code></pre>
  
  <p>Note that I'm using the <strong>ExtractTextPlugin</strong> (I have a separate CSS file), <strong>file-loader</strong> plugin (for url/images) etc. </p>
  
  <p>When I run the <code>npm run watch</code> command - there is no Hot Relaoding, nothing happens. There are no errors, but it doesn't do anything, it only opens <em>index.html</em> in the browser ( <a href="http://localhost:8080" rel="noreferrer">http://localhost:8080</a> ). </p>
  
  <p>No changes are detected. For example, if I edit:</p>
  
  <ul>
  <li><strong>app.scss</strong> </li>
  <li><strong>index.html</strong></li>
  </ul>
  
  <p>... those changes are not loaded.</p>
  
  <p>It doesn't even compile anything (if I remember well, in <strong>vue-cli</strong> if you have deleted the <strong>dist</strong> directory - when you run <code>npm run dev</code> - it will re-create the <strong>dist</strong> directory again and it will put compiled assets there... but here, if you have deleted the compiled assets - it will not compile/create the new ones).</p>