CODEWITHSUNDEEP
webpackwebpack-dev-server
Smartkid
Smartkid

Reputation: 1842

Webpack-dev-server serves old file content

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?

Upvotes: 6

Views: 6102

Answers (4)

Ankit Bhatia
Ankit Bhatia

Reputation: 92

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'),
  }
};

Upvotes: 0

SwankyLegg
SwankyLegg

Reputation: 473

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"
    }
};

Upvotes: 0

Joe Morgan
Joe Morgan

Reputation: 33

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.

Upvotes: 1

Smartkid
Smartkid

Reputation: 1842

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: {
    }
};

Upvotes: 4

Related Questions