Chris Schmitz Chris Schmitz - 19 days ago 8
Javascript Question

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

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.

Gif of issue

What am I missing?

Answer

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