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