webpack dev server

昨日はReactのチュートリアルやったわけだけど、そのときWebpackも使って、DevServer便利だったのでもうちょっと調べてみた。

HMR (Hot Module Replacement)がLiveReloadのちょっと特殊なやつで、ブラウザのプラグインとかなくても勝手にDevServer側で埋め込んでもらうように設定しとけばすぐ使えるからいい感じ。

設定は全部webpack.config.jsのdevServerに入れるのがよさそう。require("webpack-dev-server")してExpressとして動かすとかあるけど、設定ファイル書いて$(npm bin)/webpack-dev-serverの方が手軽だよね。entryに'webpack-dev-server/client?http://localhost:8080'と 'webpack/hot/dev-server'を読みこませるとかも。なんか意味あんのかな。

今の設定ファイルこんな感じ。

const webpack = require("webpack");

module.exports = {
  entry: {
    bundle: "./src/app.js"
  },
  output: {
    path: __dirname + "/public",
    publicPath: "/",
    filename: "[name].js"
  },
  module: {
    loaders: [
      {test: /\.jsx?$/, loader: "babel", exclude: /node_modules/}
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: "./public",
    proxy: {
      '*': 'http://localhost:3000'
    },
    inline: true,
    hot: true
  }
};

devServer.inlineがtrueだとHMR用のコードを読み込んでくれて、devServer.hotがtrueだとHMRしてくれる。コマンドラインで--hotするときはプラグインも自動で読み込んでくれるけど、設定ファイルに書くときはプラグインを明示的に読み込まないと警告出る。

あとExpressでサーバサイド書いたのを3000番に立ててプロキシで参照することもできるから、チュートリアルで元々用意してもらってるserver.jsを3000番で動かして、プロキシでAPI読み込んでる。これでapi/commentsからlocalhost:3000/api/comments読み込める。このへんの設定よくわからないけど'*'よりちゃんと設定した方がいいのかな。そのへんはまた今度にしよう。