webpackでreactのlive-reloadを設定してみた

いろいろ書いてあって何がbestなのかわかりませんが、試行錯誤してとりあえずできた方法をまとめておきます。

npm install

$ npm i -D webpack-dev-server
$ npm i -D react-hot-loader

webpack.config

loadersの一番初めにreact-hotを書く

module: {
    loaders: [{
        test: /\.jsx?$/,
        include: [path.resolve(__dirname, 'src')],
        loaders: ['react-hot', 'babel', 'eslint-loader'],
    }],
},

pluginsを追加

plugins: [
    ...,
    new webpack.HotModuleReplacementPlugin(),
]

entryを追加

entry: [
    'webpack-dev-server/client?http://localhost:8080', // WebpackDevServer host and port
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    './src/app.js',
],

outputのpublicPathがコンパイル後のパスと同じになるようにする

output: {
    path: path.join(__dirname, 'public'),
    filename: 'app.js',
    publicPath: '/public/', // Required for webpack-dev-server
},

開発時はJSのパスが変わってもいいならpublicPathを別にしてもいい

実行

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

この状態で
http://localhost:8080/
にアクセスするとプレーンなページが表示される。
http://localhost:8080/webpack-dev-server/
だとステータスバー付きのちょっとリッチなものになる。

package.jsonにコマンドを書いておくと楽

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --hot --inline"
},

参考

• webpackとbabelでES6コードをさくっと書く
  http://geta6.hatenablog.com/entry/2016/04/05/165201
• 公式
  http://gaearon.github.io/react-hot-loader/getstarted/