Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser vue.js vue.js

Webpack-dev-server compiles files but does not refresh or make compiled javascript available to browser


Two things were causing my problems here:

module.exports = {    entry: './src/index.js',    output: {        // For some reason, the `__dirname` was not evaluating and `/public` was        // trying to write files to a `public` folder at the root of my HD.        path: __dirname + '/public',         // Public path refers to the location from the _browser's_ perspective, so         // `/public' would be referring to `mydomain.com/public/` instead of just        // `mydomain.com`.        publicPath: '/public',        filename: 'bundle.js'    },    devtool: 'source-map',    devServer:{        // `contentBase` specifies what folder to server relative to the         // current directory. This technically isn't false since it's an absolute        // path, but the use of `__dirname` isn't necessary.         contentBase: __dirname + '/public'    },    module:{        loaders:[            { test: /\.vue$/, loader: 'vue'}        ]    }};

Here's the fixed webpack.config.js:

var path = require('path');module.exports = {    entry: [        './src/PlaceMapper/index.js'    ],    output:{        filename: 'bundle.js',        path: path.resolve(__dirname, 'public/')    },    devtool: 'source-map',    devServer:{        contentBase: 'public'    },    module:{        loaders:[            { test: /\.vue$/, loader: 'vue'}        ]    }};


After a long search I found the solution for my problem, in my case output path wasn't configured correctly.

This configuration solved my problem:

const path = require('path');module.exports = {  "entry": ['./app/index.js'],  "output": {    path: path.join(__dirname, 'build'),    publicPath: "/build/",    "filename": "bundle.js"  }....


the right solution

Tell dev-server to watch the files served by the devServer.watchContentBase option.

It is disabled by default.

When enabled, file changes will trigger a full page reload.

Example:

module.exports = {  //...  devServer: {    // ...    watchContentBase: true  }};