Webpack-dev-server: Webpack dev server is not serving the latest compiled code

[jorawarsingh]

bug

What is the current behavior?
Webpack-dev-server is not updating the browser with latest built code

Webpack configuration

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const ngtools = require('@ngtools/webpack');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = function (env) {
    const config = {
        entry: {
            polyfill: './src/polyfills.ts',
            vendor: './src/vendors.ts',
            main: './src/main.aot.ts'
        },
        resolve: {
            extensions: [".js", ".json", ".ts"]
        },
        output: {
            filename: '[name].js',
            path: path.resolve('dist')
        },
        module: {
            rules: [
                {
                    test: /\.ts?$/,
                    use: '@ngtools/webpack'
                },
                {
                    test: /\.css$/,
                    //exclude:'node_modules',
                    include: path.resolve(process.cwd(), 'src', 'app'),
                    use: ['to-string-loader', 'css-loader']
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: "./src/index.html"
            }),
            new ExtractTextPlugin("styles.css"),
            new webpack.ContextReplacementPlugin(
                /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
                __dirname
            ),
            new webpack.HotModuleReplacementPlugin()
        ],
        devtool: "source-map",
        target: "web",
        stats: "errors-only",
        devServer: {
            contentBase: path.join(__dirname, "dist"),
            compress: true,
            port: 8080,
            clientLogLevel: "none",
            historyApiFallback: true,
            watchContentBase: true
        }
    };
    return config;
};

for serve the application through npm script
"start": "webpack-dev-server --progress --color --env.development --config tools/webpack.js"

What is the expected behavior?
It should always serve the latest compiled code.
If this is a feature request, what is motivation or use case for changing the behavior?

Please mention your webpack and Operating System version.

"webpack": "2.2.1",
"webpack-dev-server": "2.4.2",

Every time i change a file i can see in console that webpack is compiling and browser is refreshing but output in browser is same as last compiled code

UPDATE

this is re-producible only when you use @ngtools/webpack plugin otherwise using ts-loader works just fine.

[HauntedSmores]

I made an issue (#885) about this as well. Are you on windows?

[jorawarsingh]

@HauntedSmores Yes i am on window!

[xiiiAtCn]

I met this issue as well. My version is 2.4.4 in windows

[oller]

+1 for this issue, I'm on a mac, don't think it's a windows specific issue.

[slaymaker1907]

I am using webpack 3 and also have this issue on Windows.

[florian-g-]

Same here with Linux Mint
"webpack": "^3.0.0"
"webpack-dev-server": "^2.5.0"

[Andrew-Lahikainen]

Same, Windows 10:
webpack 2.6.0
webpack-dev-server: 2.4.5

[JonathanJonathanJonathan]

Also problems here,
Windows 10
webpack 3.4.1
webpack-dev-server: 2.4.5

[JesseSingleton]

Having this issue too:
Windows 10
Webpack 3.41
webpack-dev-server: 2.4.5

[donnysim]

I'm having kind of the same issue, but mine is it serves latest compiled code at the start, but after some time it reverts back to who knows how old compiled code (can be minutes, can be seconds, even when not changing anything) until you restart the dev server, and the it just repeats.

Windows 10
Webpack 3.4.1
webpack-dev-server: 2.6.1

[MichaelZalla]

I'm getting the same behavior. Initial compilation succeeds and all bundles load in the browser. Any subsequent change is (ostensibly) compiled by Webpack but is not available in the browser.

macOS 10.12.5
Webpack 3.4.1
webpack-dev-server 2.6.1
ts-loader 2.3.2
typescript 2.4.2

webpack: Compiled successfully.
webpack: Compiling...
Hash: 4c58a816563875a772dd
Version: webpack 3.4.1
Time: 1830ms
                               Asset      Size  Chunks                    Chunk Names
                       app.bundle.js    568 kB       0  [emitted]  [big]  app
                    vendor.bundle.js   5.37 MB       3  [emitted]  [big]  vendor
0.9bb86568f99493e5e6b1.hot-update.js   19.3 kB       0  [emitted]         app
9bb86568f99493e5e6b1.hot-update.json  43 bytes          [emitted]         
 [209] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {3} [built]
 [246] ./src/ts/app/.../foo.ts 7 kB {0} [built]
    + 300 hidden modules
webpack: Compiled successfully.
webpack: Compiling...
Hash: f7a6e2addadcc8d90ea0
Version: webpack 3.4.1
Time: 1618ms
                               Asset      Size  Chunks                    Chunk Names
                       app.bundle.js    568 kB       0  [emitted]  [big]  app
                    vendor.bundle.js   5.37 MB       3  [emitted]  [big]  vendor
0.4c58a816563875a772dd.hot-update.js   19.3 kB       0  [emitted]         app
4c58a816563875a772dd.hot-update.json  43 bytes          [emitted]         
 [209] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {3} [built]
 [246] ./src/ts/app/.../foo.ts 7 kB {0} [built]
    + 300 hidden modules
webpack: Compiled successfully.

[xusai2014]

I have the same problem . Couldn't auto compile when some files are changed.

[shellscape]

Folks, please don't follow up with "same" or "me too" comments unless you have additional info, aside from your environment/os, to add to the original issue. Please use the _reaction_ button to add a 👍 to the original post.

That said, we'd happily review a pull request for this issue.

[ndraiman]

I had the same issue, the culprit was webpack-chunk-hash.
Removing it from my webpack config solved the problem.

---

My Packages:

"devDependencies": {
    "@types/facebook-js-sdk": "^2.8.3",
    "@types/node": "^8.0.25",
    "angular2-template-loader": "^0.6.2",
    "autoprefixer": "^7.1.2",
    "awesome-typescript-loader": "^3.0.4-rc.2",
    "codelyzer": "^3.1.2",
    "css-loader": "^0.28.5",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.28.0",
    "image-webpack-loader": "^3.2.0",
    "inline-manifest-webpack-plugin": "^3.0.1",
    "node-sass": "^4.5.0",
    "postcss-flexbugs-fixes": "^3.2.0",
    "postcss-load-config": "^1.2.0",
    "postcss-loader": "^2.0.6",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.4",
    "sass-loader": "^6.0.0",
    "script-ext-html-webpack-plugin": "^1.8.5",
    "style-loader": "^0.18.2",
    "tslint": "^5.7.0",
    "tslint-loader": "^3.4.2",
    "typescript": "^2.5.1",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1",
    "webpack-merge": "^4.1.0"
  },
  "dependencies": {
    "@angular/common": "^4.3.6",
    "@angular/compiler": "^4.3.6",
    "@angular/core": "^4.3.6",
    "@angular/forms": "^4.3.6",
    "@angular/http": "^4.3.6",
    "@angular/platform-browser": "^4.3.6",
    "@angular/platform-browser-dynamic": "^4.3.6",
    "@angular/router": "^4.3.6",
    "core-js": "^2.5.0",
    "rxjs": "^5.4.3",
    "zone.js": "^0.8.17"
  }

Webpack config:

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts'
    },
    output: {
        path: helpers.root('dist'),
        // publicPath: '/',
        filename: '[name].[chunkhash].js',
        chunkFilename: '[id].[chunkhash].chunk.js'
    },
    module: {
        rules: [{
            test: /\.ts$/,
            loaders: [{
                loader: 'awesome-typescript-loader',
                options: {
                    configFileName: helpers.root('src', 'tsconfig.json')
                }
            },
                'angular2-template-loader'
            ]
        }, {
            test: /\.html$/,
            loader: 'html-loader',
            query: {
                ignoreCustomFragments: [/\{\{.*?}}/],
                root: helpers.root('src'),
                attrs: ['img:src', 'img:ng-src']
            }
        }, {
            test: /\.(png|jpe?g|gif|svg)$/i,
            loaders: [
                'file-loader?hash=sha512&digest=hex&name=images/[name].[hash].[ext]',
                'image-webpack-loader'
            ]
        }, {
            test: /\.(eot|otf|ttf|woff|woff2)$/i,
            loader: 'file-loader?hash=sha512&digest=hex&name=fonts/[name].[hash].[ext]'
        }, {
            test: /\.scss$/,
            exclude: [helpers.root('src', 'app')],
            loader: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            importLoaders: true
                        }
                    }, {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true
                        }
                    }, {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            })
        },
            {
                test: /\.scss$/,
                include: [helpers.root('src', 'app')],
                loaders: [
                    {
                        loader: 'raw-loader'
                    }, {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true
                        }
                    }, {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },

    plugins: [
        // Workaround for angular/angular#11580
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)@angular/, // The (\\|\/) piece accounts for path separators in *nix and Windows
            helpers.root('./src'), // location of your src
            {} // your Angular Async Route paths relative to this root directory
        ),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['vendor', 'polyfills', 'manifest'],
            minChunks: Infinity
        }),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.HashedModuleIdsPlugin(),
        //new WebpackChunkHash(), // <---------- **Removed this**.
        new InlineManifestWebpackPlugin({
            name: 'webpackManifest'
        }),
        new HtmlWebpackPlugin({
            template: helpers.root('src', 'index.ejs'),
            filename: helpers.root('dist', 'index.html'),
            minify: {
                removeComments: true
            }
        }),
        new ScriptExtHtmlWebpackPlugin({
            defer: [/app/, /vendor/, /polyfills/],
            defaultAttribute: 'async'
        }),
        new ExtractTextPlugin({
            filename: '[name].[contentHash].css',
            allChunks: true
        })
    ],
    resolve: {
        extensions: ['.ts', '.js']
    },
    devServer: {
        historyApiFallback: true,
        stats: 'minimal',
        compress: true,
        inline: true,
        port: 8080
    }
};

[ThorstenBux]

Same problem here for now I use:

    "watch": "webpack --progress --watch",
    "start": "concurrently -k -p \"[{name}]\" -n \"Webpack,HTTP-Server\" -c \"cyan.bold,green.bold\"  \"npm run watch\" \"npm run serve\" ",
    "serve": "http-server ./dist -p 8081 -o"

The only thing missing it auto-reload

[shellscape]

This issue is quickly coming up on a 30-day stale date. Last call for a PR from the community. However, it looks like this issue is the cause of many different edge cases amongst those who have replied.

[aydun1]

I had this problem serving through an Apache reverse proxy with mod_pagespeed enabled.
The page would reload when I changed a file, but it would remain the same.
Disabling mod_pagespeed fixed the issue for me.

[shellscape]

folks, we've got a few workarounds listed in this issue for various cases that produce the same result. we'll reopen if someone can nail down a specific culprit within webpack-dev-server to discuss, and as always we'd happily accept a PR for review. given the age of this issue, the multiple edges that this can be experienced on, and the multiple workarounds, we're going to close this one.

[gzoritchak]

I don't understand why this issue is closed. It's not working even with a basic configuration. The only workaround is to use webpack --watch.

[miks]

Same for me. It's still not working.

[indrekru]

Hello, had the same issue. Here's what fixed it for me:
I had "webpack-dev-server --config webpack.config.dev.js --content-base ./ --port 1729 --progress --inline" in my package.json, removing the --content-base ./ fixed it, no need to specify the content-base really, it comes out of the box

[LeDanielH]

removing devServer option hot: true fixed it for me.

[elliot-a]

Fix for me : disable all chrome plugins that have similar features to hot reload in my case "LiveReload" & "JetBrains IDE support".

[Randore]

@indrekru what goes inside webpack.config.dev.js ?

[Asalem1]

@gzoritchak Can't tell you how grateful I am for your comment.

[mribichich]

In my case was using WebpackChunkHash and ModuleConcatenationPlugin together.

Since WebpackChunkHash has a bug when using it with ModuleConcatenationPlugin
https://github.com/alexindigo/webpack-chunk-hash/issues/15

Disabling any of the two works again

[ProductOfAmerica]

Still getting this issue, workarounds don't work.

[stnever]

FWIW, I was having a similar symptom (browser was always getting a stale version of the compiled files), which brought me to this issue, BUT in my case the problem was deeper: webpack wasn't actually picking up changes and recompiling.

I'm using a Xubuntu 16.04 guest in a Windows 8.1 Virtualbox host, using Node 8.6.0, and webpack --watch itself wasn't being notified of changes in the source files. I added the polling option to my webpack.config.js and it started working (even hot reloading):

module.exports = {
  ...
  watchOptions: {
    poll: true
  }
}

I knew there were problems with watches on shared Virtualbox folders, but this particular VM doesn't have any shared folders -- all files are inside the VM.

[leandroruel]

i made a upgrade on my nodejs to 9.x and it's working now.

[JoaquinAraujo]

Apparently, the problem was never solved :sob:

[KokoDoko]

Nope. webpack-dev-server won't recompile or reload for me either, tried all the above fixes.

[usmansbk]

Not working for me... so i just switched to using npm 'live-server' and 'webpack --watch'.

[carlosHerz]

Adding this to the webpack.config.js file did the trick for me:

devServer: {publicPath: '/public', port: 8080},

[rootUJ99]

I had the same issue, upgrading packages worked for me :)

[bangnguyenanh]

Still stuck on this issue :(

[antimatterjs]

It seems to be working fine for me now on Phaser projects, but not on React projects.

For phaser projects, the solution was to make sure that code wasn't wrapped in a window.onload = () => {}

Not sure what's going on in React - is everyone here using React or are people using something else?

[usmansbk]

So, I read the docs and it turns out that I needed to add same publicPath in output and devServer _properties_ like so,

 output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'js'),
    publicPath: path.resolve(__dirname, '/js/')
  },
  devServer: {
    contentBase: path.resolve(__dirname, './'),
    publicPath: path.resolve(__dirname, '/js/'),
  },

[50shashwat]

other workaround is to use webpack --watch but hot reload is not there in that option.

[hamasho]

This stackoverflow answer may be helpful.
https://stackoverflow.com/a/42717524

[idbartosz]

Tested with simple app and everything works (node: v8.9.4; webpack: 3.11.0; webpack-dev-server: 2.11.1)

├── node_modules
├── public
│  ├── index.html
│  ├── scripts
│  │   └── bundle.js
│  └── styles
│       └── main.css
├── src
│   └── index.js
...

index.html

...
    <script src="scripts/bundle.js"></script>
  </body>
</html>

webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public/scripts')
  },
  devtool: 'source-map',
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    publicPath: '/scripts/',
    host: '127.0.0.1',
    port: 8080,
    open: true
  }
}

Note: it's important that <script src="scripts/bundle.js"> points to the same path as devServer.publicPath (ie. http://127.0.0.1:8080/scripts/bundle.js)

[turok1997]

As I understand, you actually need neither contentBase property nor publicPath for basic run. contentBase just tells the path where to take static files, while publicPath says relative path in the url where to serve your project at all.

project structure

├───dist (read note below)*
└───src
|    ├───css
|    ├───js
|    └───templates
├───webpack.config.js

• _actually dist could be empty, as webpack-dev-server serves files (except static ones maybe) from the memory, not FS_

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const dist = path.resolve(__dirname, './dist');
//...
module.exports = {
    entry: {
        index: path.resolve(src, './js/index.js')
    },
    output: {
        filename: 'js/[name].bundle.js',
        path: dist
    },
        //...
    devServer: {
        hot: true,
        host: '0.0.0.0', //to serve all clients from any sources (e.g. local network)
        open: false
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(templates, './home.html'),
            filename: path.resolve(dist, './index.html')
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]
}

home.html

<html>
<body>
HELLO, WORLD!
</body>
</html>

Make sure you have cross-env module installed. (npm install cross-env --save-dev) and then
package.json

"scripts": {
    ...
     "start": "cross-env NODE_ENV=development webpack-dev-server --color"
  }

Just run npm start in the console

[liujiajun1]

same problem

[jwu910]

@liujiajun1 https://github.com/webpack/webpack-dev-server/issues/875#issuecomment-362101506 this worked for me.

[pavlohibey]

I was having a similar issue using webpack-dev-middleware with webpack-hot-middleware. The updated bundle was not served after the initial build (first start) of dev server. The updated bundle was served only after forcing webpack to rebuild, e.g. saving any watched project file, and making a hard refresh in the browser.

The solution I've found is to force recompilation in the setup script using devMiddleware.invalidate method.

Currently using this bootstrap script:

const webpack = require('webpack');
const express = require('express');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('../webpack.config')('development');

const compiler = webpack(config);
const app = express();

const devMiddleware = webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
  historyApiFallback: true,
  hot: true,
  inline: true,
});

/**
 * This method call instructs a webpack-dev-middleware instance to recompile the bundle
 */
devMiddleware.invalidate();

app.use(webpackHotMiddleware(compiler, { noInfo: false }));
app.use(devMiddleware);


app.get('*', (req, res) => {
  const htmlBuffer = devMiddleware.fileSystem.readFileSync(`${config.output.path}/index.html`)

  res.send(htmlBuffer.toString())
})

app.listen(8181, 'localhost');

[BrentGrammer]

Just in case this might help someone else, I tried most of the solutions here which did not work for me and wound up just moving my project files from the nested directory they were in onto the desktop, and then webpack dev server worked as expected and the problem was solved. I have no idea why this works, but just wanted to pass the (simple) solution on in case it helps someone else who has tried all of the above to see if just moving the project files will work. (FYI, I'm just running on Windows native environment) Good luck...

[justengland]

I have struggled with this for the better part of a day, then I found this help
https://medium.com/bcgdv-engineering/when-using-react-js-webpack-dev-server-does-not-bundle-c2d340b0a3e8

[GerkinDev]

Hi,

Actually, I think this issue can be highly related to the environment, for at least one of the situations it happens.

• On my MacOS, everything works well, using the configuration bellow. When changing a file (a SCSS in my case), Webpack triggers a recompilation & the output file is updated.
• On my Ubuntu's Windows integration, the recompilation is triggered but the file is never updated. I have to restart the dev server at every changes to update the ouput file.

I don't have pure Linux OS to test, but I guess it would just work well...

So, here is my Webpack config, a bit cutted out

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const mainConf = {
    entry: ['./assets/src/scripts/main.ts'],
    buildPath: __dirname,
    publicPath: 'assets/dist',
    url: 'http://localhost:8080/'
};

module.exports = {
    entry: mainConf.entry,
    mode: 'development',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(mainConf.buildPath, mainConf.publicPath),
        chunkFilename: '[id].[chunkhash].chunk.js',
        publicPath: mainConf.url + mainConf.publicPath + '/',
    },
    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
            // A bunch of rules
        ]
    },
    plugins: [
        // Clean dist folder.
        new CleanWebpackPlugin([path.resolve(mainConf.buildPath, mainConf.publicPath)], {
            verbose: true // Write logs to console.
        }),

        // avoid publishing when compilation failed.
        new webpack.NoEmitOnErrorsPlugin(),
    ],
    devServer: {
        contentBase: './',
        historyApiFallback: true,
        inline: true,
        progress: true,
        publicPath: mainConf.url + mainConf.publicPath + '/',
        headers: { "Access-Control-Allow-Origin": "*" }
    },

    // pretty terminal output
    stats: { colors: true },
};

My package.json contains following dev-dependencies:

{
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3",
    "webpack-hot-middleware": "^2.22.1"
}

Environment infos:

• On Windows:
  
  
  
  • Node: 9.11.1
  
  
  • Windows 10 v1709 - 16299.371
  
  
  • Linux subsystem version 20170830.1 with ubuntu 16.04 LTS
  
  
• On MacOS:
  
  
  
  • Node: 9.10.1
  
  
  • MacOS: 10.10.4 High Sierra
  
  

GL HF with this issue ;) and thanks for the help !

[luckylooke]

As I have mentioned here. I was getting bundle file from /dist builded earlier, not the one served from memory.

This feature
If you're having trouble, navigating to the /webpack-dev-server route will show where files are served. For example, http://localhost:9000/webpack-dev-server. (src)
saves me, I was able to understand how files are served, then I have changed it by publicPath.
🎉

My problem was in my multiple webpack config environment, so files were served in named contexts.
Like:
http://localhost:9000/webpackConfig1/yourFiles
http://localhost:9000/webpackConfig2/yourFiles
...
etc

[Youfka]

have the same problem, really can't find the issue,
I have "server" command in package.json:
"server": "webpack-dev-server --mode development --open --watch"
and this is my webpack config. I tried many solutions, it's compiling, but not building
````
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
let conf = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'main.min.js',
publicPath: 'dist/'
},
devServer: {
contentBase: path.join(__dirname, "dist"),
overlay: true,
watchContentBase: true,
hot: true
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './src/index.pug')
}),
new ExtractTextPlugin("style.css"),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};

module.exports = (env, options) => {
let production = options.mode === 'production';
conf.devtool = production ? false : 'eval-sourcemap';
return conf;
}
````

[hermanomark]

I stumbled upon this problem sometimes it solves when I restart my machine.

[kgagnon-seedbox]

webpack-dev-server needs to be installed globally to "watch" the project.

sudo npm i webpack-dev-server

[mahmoudafifi414]

if the webpack not serving code changes so
in webpack.congif.js write :

module.exports = {
//...
devServer: {
watchOptions: {
poll: true
}
}
};

for further information see this link:
https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

[albertian]

Hi guys.
I'm a newbie in Webpack and I got the same problem.
But now it works good. Even without bundle.js file my server works correctly.
command: node_modules/.bin/webpack-dev-server --config webpack.config.js --hot
webpack.config.js

output: {
        path: __dirname + '/js',
        publicPath: '/js',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase:__dirname + '/',
        publicPath: '/js'
    },

Both _publicPath_ are url path, so not need to put your file path here.
After my changes my webpage reloades after each file change.
I hope it will be helpful so someone.

[khyamay]

like @albertian mentioned and has shown in the example publicPath for output and devServer needs to be same.

webpack-dev-server doesn’t serve the actual generated bundle from file system. Rather it'll watch your source files, and recompile the bundle whenever they are changed. This modified bundle is served directly from memory.

Why webpack-dev-server Live-Reload Is Not Working

Webpack — Understanding the ‘publicPath’ mystery

These two articles explains in deep about live reloading and publicPath.

[corentingiraud]

I'm on ubuntu 18.04 and i fix this issue following Visual Code guidelines.

Hope it will help.

[mathstracted]

Not sure if the same issue is happening for other that is happening for me.
My problem was that I had created a class but had forgotten to export it. And I started to use the class directly in one of other typescript file in the same module without having to export it. The ide I was using was vs code. I guess it thought the class was in global module and just didn't report error.
In my bundled code code would execute upto the point where the I started using the class and after instantiating the could would just suspend(I don't know what else to call it), without reporting any error. To me it was looking like the webpack was not compiling the code.

After going line by line, I found out at which point code stopped. After properly exporting and importing resolved the issue...
Due to missed error handling I couldn't find out the issue.
This was not an issue with webpack though.

[EdgardoRodriguezSolano]

Live-reload was not working for me. This might be a really dumb error, but I had missed (or deleted) the <meta charset="utf-8" /> tag in the <head></head> section of my index.html. It's working like a charm now.

[neilmonroe]

Thanks for pointing these out, @khyamay! It really helped me understand how webpack-dev-server works.

like @albertian mentioned and has shown in the example publicPath for output and devServer needs to be same.

webpack-dev-server doesn’t serve the actual generated bundle from file system. Rather it'll watch your source files, and recompile the bundle whenever they are changed. This modified bundle is served directly from memory.

Why webpack-dev-server Live-Reload Is Not Working

Webpack — Understanding the ‘publicPath’ mystery

These two articles explains in deep about live reloading and publicPath.

The "Why webpack-dev-server Live-Reload Is Not Working" article is what everyone here should read. This contains most of the answers to the questions here that keep getting repeated.

Having local files in an output dir from webpack-cli will cause problems. Remove them or output them to a different path if you are going to use the dev server.

[xeptore]

i had the same problem, i tried all of these suggestions, but none of them woks for me.
finally, i tried to add a newline at the end of the webpack configuration and it just worked!
awesome!

[Mozar10]

Restarting the computer fixed it for me :confused:

[DrakeXiang]

Just figured out sometimes it's about case sensitivity, I'm on macOS, and I misspelled route path from /Auth to /auth, the issue is gone when I fix the typo, hope helped

[lestrato]

I spilled a cup of coffee on my keyboard and now it started working

[pmontu]

I increased fs.inotify.max_user_watches=524288 and it worked
https://code.visualstudio.com/docs/setup/linux#_visual-studio-code-is-unable-to-watch-for-file-changes-in-this-large-workspace-error-enospc

[Msey]

the resolution for me was to define paths properly

output: {
        filename: 'bundle.js',
        publicPath: '/assets/',
        path: path.resolve(__dirname, './wwwroot/assets/'),        
    }

notice that the public path must have / on each side

[pattoM]

I encountered this on a Django + React app. I was on Kali linux, testing on Chrome. Fix was to run the django app with --nostatic flag because the older files were being cached. Please note that in my case, latest version was being served initially but suddenly stopped.

[CallmeKingsley]

try adding the following code to your webpack.config.js file.
devServer: {
watchContentBase: true
},

[zzwx]

Removing experimentalWatchApi: true from ts-loader options helped me!

[ascott18]

The cause of this issue for me was one of the various caches stored in node_modules/.cache. Deleting that folder instantly fixed it for me. I discovered these by watching Process Monitor for file accesses by node.exe on initial startup of my application.

[kaczor6418]

You should check publicPath attribute of output config object. If you do not have it you should add this attribute to this object, then webpack will know when files should be changed (if any file of publicPath will be changed then webpack dev-server should recompile files and serve updated context).
```javascript
...
output: {
publicPath: '/',
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
...
````

[lzxxxxx]

Check your file case.
My situation: the file real name: A.js. But I import it with the lowercase a.js
webpack can't watch my file change, can't generate new vendor for my code change in A.js.

[veaba]

I just encountered this problem and solved it.
Remove your node_modules, and re install it.