Webpack compiles but webpack-dev-server does not with same config

Question

I'm beginning to learn webpack and trying to work through using the webpack-dev-server for compiling and browser reloading.

I'm running into an issue where when I run the command:

webpack

my files compile fine, but when I use the command:

# I removed the "--hot" and "--inline" to try to isolate where the problem 
# was coming from.

webpack-dev-server --config webpack.config.js

command the output in the terminal looks fine, but nothing actually compiles:

The thing is, the webpack-dev-server does successfully serve the files in the public directory so that part is working, it's just not compiling the javascript and vue files.

Here's my webpack.config.js

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

I've been following along with the vue-loader start tutorial which describes the process and I don't see anything amiss.

I know I specify a content directory that is different than the tutorial, but as far as I can tell that doesn't affect the compilation of the files.

What am I missing here?

Answer 1

This happens because Webpack-dev-server serves files from memory not disk. The exact quote from the documentation, https://webpack.github.io/docs/webpack-dev-server.html

This modified bundle is served from memory at the relative path specified in publicPath (see API). It will not be written to your configured output directory. Where a bundle already exists at the same url path the bundle in memory will take precedence (by default).