Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser

Question

I\'m trying to use webpack-dev-server to compile files and start up a dev web server.

In my package.json I have the script property set to:

Answer 1

I experienced a similar situation where webpack-dev-server was serving my index.html file but not updating. After reading a few posts I realized that webpack-dev-server does not generate a new js file but instead injects one into index.html.

I added the html-webpack-plugin to my app and with the following configuration in my webpack.config.js file:

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
  ]

I then commented out the script tag referencing my entry js file in index.html. I can now run webpack-dev-server without any additional flags and any changes to my files will display in the browser instantly.