react起動のためのwebpack-dev-serverの最低限設定について

Question

https://github.com/mzabriskie/react-example/blob/master/webpack.config.js

を参考してreactの勉強中です。

react-dev-serverというのを利用してhello world的な設定を立ち上げようとしてますが、

最低限のwebpack.config.js設定がよくわかりません。
それぞれの役割を調査するためにもreact-dev-serverに必要な設定だけが知りたいです。

後webpack.config.jsは自ら全部書かないといけないでしょうか？
generatorなどがあれば教えていただきたいです。

Answer 1

こんにちは。

• https://github.com/mzabriskie/react-example/blob/master/webpack.config.js

の例で webpack-dev-server の設定に該当する部分は、

devServer: {
  port: 8080,
  historyApiFallback: true
},

です。

これに加えて、contentBase: （serveするディレクトリを指定、上の例だと build）や open: （自動的にブラウザで開くかどうか、true or false）などのオプションを設定すれば良いと思います。

その他のオプションについては、

• https://webpack.js.org/configuration/dev-server/

をご参照下さい。

Answer 2

create-react-appというreact公式ツール使えば環境構築不要で直ぐにハローワールド的なものを表示できますよ。
https://github.com/facebookincubator/create-react-app/blob/master/README.md

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

内部ではwebpackが使用されています。