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

the right solution

Tell dev-server to watch the files served by the devServer.watchContentBase option.

It is disabled by default.

When enabled, file changes will trigger a full page reload.

Example:

module.exports = {
  //...
  devServer: {
    // ...
    watchContentBase: true
  }
};

I also had a problem with my devserver which stopping working. Previously it had worked, then I added a ton of extras to get a production build. Then when I came back to devserver it didn't work any more.

Took lots of sleuthing - eventually starting with a prior commit in git, then reintroducing changes one-by-one until I figured it out.

Turns out it was a change I had made to package.json, specifically this line:

  "browserslist": "> 1%, not dead",

This was useful to guide postcss, regarding the browsers to target.

But, it stops devserver working. Workaround is to add this to the dev webpack config:

target: 'web', 

I found the solution here: https://github.com/webpack/webpack-dev-server/issues/2812

Hope that saves someone a few hours of trouble!

Somehow, for my case, removing "--hot" makes it work. So, I removed hot: true

webpack.dev.js

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    publicPath: '/js/',
    contentBase: path.resolve(__dirname, 'docs'),
    watchContentBase: true,
  }
});

webpack.common.js

  output: {
    path: path.resolve(__dirname, 'docs/js'),
    filename: '[name].min.js',
    library: ['[name]']
  },

What worked for me:

cache: false

https://webpack.js.org/configuration/cache/

My case was that I got so deep into experimenting with Webpack features, but totally forgot that I had set inject to be false the entire time like so...

 new HTMLWebpackPlugin({
        inject: false,
        ...
 }),

Switching that on was my ticket.

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.

I'll add my own special tale of Webpack --watch woe to the wall of suffering here.

I was running

webpack --watch

in order to build a Typescript project. The compiled .js files would update, but the bundle that the browser was seeing would not. So I was basically in the same position as the OP.

My problem came down to the watchOptions.ignored parameter. The original author of the build config had set up ignored as a filter function, which turns out to not be a valid value for that parameter. Replacing the filter function with an appropriate RegExp got the --watch build working again for me.

What helped me was introducing devServer.devMiddleware. For example, in webpack-dev-server 4.10.0, property contentBase was not available anymore.

devServer: {
 devMiddleware: {
  index: true,
  publicPath: './build/static/',
  serverSideRender: true,
  writeToDisk: true,
 }
},

Your project tree is not clear, however the problem may be in contentBase setting. Try to set contentBase: __dirname