Webpack-dev-server serves old file content

user_554754 0
Viewed 4975

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?

webpack-dev-server webpack
4 Answers

I was struggling with the same thing and my directory structure matched yours almost exactly. The docs state that "You must not specify an absolute path [for output.filename]." I didn't see the utility of using the path module given the complexity of the problem.

You may be able to solve the issue this way:

module.exports = {
    entry: "./app/main.js"
    output: {
        filename: "./build/bundle.js"
    }
};
user_17215070

I would recommend to visit https://webpack.js.org/configuration/dev-server/#devserver and check the configuration there itself. The below piece of code will resolve your problem as it did mine.

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
  }
};
user_28659670
Related