webpack-dev-server not updating bundle when saving file

Question

I'm teaching myself webpack from scratch and I am trying to use the webpack-dev-server to live update the browser when I change a .js in my app file and show the changes. Say I have the following package.json

{
  "name": "webpack-babel",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "serve": "webpack-dev-server --hot",
    "start": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

and this is my webpack.config.json

const path = require('path');

    const config = {
        entry: './app/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['es2015']
                    }
                }
            ],
        }
    };

    module.exports = config;

I have the following code in my ./app/index.js (nothing crazy here):

let message = 'I love socks and snacks !';
console.log(message);

When I run npm run serve change the message in my app/index.js to 'I love cola and snacks !!!' and save the terminal does compile but nothing is updated in the browser. The bundle file still contains the old message and isn't being generated. What am I doing wrong? I only started trying this a few hours ago so I am a bit of a newbi with webpack.

I have turned off "safe write' in my IDE and my file structure is like so:

this is my index.html...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>

* UPDATE * adding publicPath: 'dist/' to the output object seems to work... but I am unsure if this is the correct solution to my problem.

The webpack dev server doesn't write anything to disk. It's all served in memory. — Andy Ray, Feb 26 '17 at 20:40

score 19 · Accepted Answer · answered Feb 26 '17 at 23:18

The bundle file still contains the old message and isn't being generated.

webpack-dev-server does not create any file, but serves the bundle from memory when the according path is hit. By default this is /, so when you try to load /bundle.js, you will get bundle from memory.

But in your index.html you request /dist/bundle.js. The only reason it can find it in the first place, is because you generated it and it's actually present on your file system. To be clear if you go to:

http://localhost:8080/dist/bundle.js

you get the bundle from your file system, but when you go to:

http://localhost:8080/bundle.js

you get the bundle from memory by webpack-dev-server, although it doesn't exist on your file system.

As you've correctly examined, you can change that path with the publicPath option. So setting publicPath: '/dist/' will make webpack-dev-server serve the bundle from memory when /dist/bundle.js is hit, regardless of whether that file exists on your file system.

Setting output.publicPath also affects some loaders that include assets, as seen in the example of html-loader. If you don't desire that effect, you can use devServer.publicPath instead, to only change the behaviour of webpack-dev-server. But as mentioned in the docs, it's recommended for them to be the same.

Hi, Michael, I have a problem with the configuration of webpack can you check my thread? https://stackoverflow.com/questions/60065484/how-to-update-multiple-bundled-js-files-using-webpack — The Dead Man, Feb 04 '20 at 21:41

score 6 · Answer 2 · answered Oct 24 '21 at 07:15

6

According to latest webpack DOC, devServer configuration should like this.

devServer: {
  static: './dist/',
  hot: true,
  devMiddleware: {
      publicPath: '/dist/',
      writeToDisk: true,
   },    
 }

answered Oct 24 '21 at 07:15

menomanabdulla

175
1
5

webpack-dev-server not updating bundle when saving file

2 Answers2

Linked