Webpack-dev-server serves old file content

Question

I have a very simple project:

appdir +- app +- main.js +- build +- bundle.js +- index.html +- webpack.config.js

The webpack.config.js:

var path=require("path");

module.exports = {
    entry: path.resolve(__dirname, "./app/main.js"),
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    }
};

After I changs the main.js, webpack-dev-server seems like it detects the change and performs a rebundle the bundle.js, but the browser still recieve the old content of main.js.

I start the server by executing webpack-dev-server webpack.config.js

Any ideas?

Answer 1

Looking into https://github.com/webpack/webpack-dev-server/issues/24 , I add the publicPath to webpack.config.js and the webpack serves the bundle with new content now ^_^

var path=require("path");

module.exports = {
    entry: path.resolve(__dirname, "./app/main.js"),
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js",
        publicPath: "/build/",
    },
    devServer: {
    }
};

Answer 2

I had the same problem, and it turned out to be cause by missing trailing slashes in my src and dist paths in webpack.config.js.