[解決済み] Webpack-dev-serverはファイルをコンパイルするが、コンパイルしたjavascriptをブラウザで利用可能にするために更新しない。

質問

webpack-dev-server を使ってファイルをコンパイルし、開発用ウェブサーバーを立ち上げようとしています。

私の package.json にscriptプロパティを設定しています。

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

で、その --hot と --inline は、ウェブサーバとホットリロードを有効にする必要があります (私が理解するところでは)。

私の webpack.config.js ファイルでは、エントリ、出力、devServer を設定し、ローダを追加して .vue ファイルの変更を探すためのローダーを追加しています。

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

このセットアップで、私は npm run dev . webpack-dev-serverは起動し、モジュールローダテストは動作します（つまり、任意の.vueファイルを保存すると、webpackが再コンパイルされます）、しかし、。

• ブラウザがリフレッシュされない
• コンパイルされた javascript がメモリに保存され、ブラウザで利用できるようになることはありません。

ブラウザウィンドウでVueのプレースホルダーが置き換えられることはなく、javascriptコンソールを開いてもVueインスタンスは作成されず、グローバルに利用可能になることもないので、2番目の箇所で、私はこれを確認することができます。

何が足りないのでしょうか？

どのように解決するのですか？

ここでは、2つのことが問題の原因でした。

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

以下は、固定された 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'}
        ]
    }
};