webpack-dev-serverのauto-reloadでハマったこと

webpackのdev-serverでauto-reloadが効かなくてハマったので、備忘録として書いておく。

webpack.config.jsに以下のように記述して、

webpack.config.js

module.exports = {
  entry: './js/src/entry.js',
  html: './index.html',
  output: {
    path: "./js/build",
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.vue$/, loader: 'vue' },
    ]
  },
  devServer: { 
    inline: true,
    hot: true
  }
}

で以下のコマンドで起動、dev-serverを起動して

$ webpack-dev-server --hot --inline

ファイルを編集したけど、HMRはおろか、ブラウザのリロードもかからない、、、なぜ？？

webpack.config.jsにcontent-baseの記述がないとその設定ファイルの置いてある
ディレクトリの静的ファイルを読みに行くはず。。。。。
http://webpack.github.io/docs/webpack-dev-server.html

表示はされるけど、変更が効いてない感じ。

原因はファイルの場所がよろしくなかったみたい。

serveされる場所に静的ファイルと変更がかかるファイルがないとダメみたいだった。

webpack.config.js

module.exports = {
  entry: './js/src/entry.js',
  html: './index.html',
  output: {
    path: "./js/build",
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.vue$/, loader: 'vue' },
    ]
  },
  devServer: { 
+   contentBase: 'js/build',
    inline: true,
    hot: true
  }
}

contentBaseを追加して静的ファイルと出力ファイルを同じ階層においたら動いた。
よかったー！