Webpack-dev-serverはファイルをコンパイルしますが、リフレッシュせず、コンパイルされたjavascriptをブラウザで利用できません。

Question

webpack-dev-serverを使用してファイルをコンパイルし、devウェブサーバーを起動しようとしています。私package.jsonで

私はへのスクリプトプロパティを設定している：

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

ので--hotと（私はそれを理解）--inlineはウェブサーバとホットリロードを有効にする必要があります。私は、エントリ、出力、およびdevServer設定を設定だけでなく、.vueファイルの変更を探すためにローダーを追加私の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'} 
     ] 
    } 
}; 

したがって、この設定で、私はnpm run devを実行します。 WebPACKの-devのサーバーは、起動モジュールローダのテスト作品（つまり、私はそれを再コンパイルするWebPACKの原因となる任意の.vueファイルを保存するとき）、しかし：

• ブラウザが取得
• コンパイルされたJavaScriptを更新したことがありませんメモリに保存されているが、第2弾丸のブラウザ

に提供されることはありません、私はVUEプレースホルダが交換されることはありませんし、私はJavaScriptコンソールを開く場合はVueのインスタンスが作成されることはありませんので、ブラウザウィンドウでこれを見ることができます世界中で利用可能になりました。

私は何をしないのですか？

Answer 1

つの事はここに私の問題を引き起こしていた。

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

Answer 2

私は同じ問題を抱えていたと私はすべてのそれらのポイントに加えて、我々はまた、持っていることがわかりますindex.htmlを出力bundle.jsとともに同じフォルダに入れ、contentBaseをこのフォルダ（ルートまたはサブフォルダ）に設定します。

Answer 3

私の場合、長い検索の後に私の問題の解決策が見つかりました出力パスが正しく構成されていませんでした。

この構成では、私の問題を解決しました：

const path = require('path'); 

module.exports = { 
    "entry": ['./app/index.js'], 
    "output": { 
    path: path.join(__dirname, 'build'), 
    publicPath: "/build/", 
    "filename": "bundle.js" 
    }.... 

Answer 4

それが原因ExtractTextPluginで発生する可能性があります。開発モードでExtractTextPluginを無効にします。本番環境でのみ使用してください。