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

Question

I'm trying to use webpack-dev-server to compile files and start up a dev web server.

In my package.json I have the script property set to:

"scripts": {   "dev": "webpack-dev-server --hot --inline",  } 

So the --hot and --inline should enable the webserver and the hot reloading (as I understand it).

In my webpack.config.js file I set the entry, output, and devServer settings as well as add a loader to look for changes in .vue files:

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

So with this setup, I run npm run dev. The webpack-dev-server starts up, the module loader test works (i.e. when I save any .vue file it causes webpack to recompile), but:

• The browser never refreshes
• The compiled javascript that gets stored in memory is never made available to the browser

On that second bullet, I can see this because in the browser window the vue placeholders are never replaced and if I open up the javascript console the Vue instance is never created or made available globally.

What am I missing?

Answer 1

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