React：webpack.config.jsについて

Webpackの使い方をあまり理解できていなくて困っていたのですが、react-router-tutorialのサンプルコードをみて少し理解できたので、そのメモです。

Reactの開発ではこんなJSファイルをつくっていくと思います。

ですが、HTMLファイルでそのJSを直接読み込むことはやりません。buildして生成されたJSファイルを読み込んで利用します。

bulidにはwebpackを利用します。webpackの設定はwebpack.config.jsという感じのファイルを用意して対応します。

『entry: './index.js',』という記述がビルド対象のファイル指定を行っているところです。
『output』の部分でビルド後のファイル出力先を指定しています。

output: {
  path: 'public/build',
  filename: 'bundle.js',
  publicPath: ''
},

ではビルドはどのように実行できるのかなとpackage.jsonを確認したところ、startスクリプトでwebpackコマンドを実行して対応していました。

start:devとstart:prodの二種類が用意されていますが、開発環境モードでの実行と本番環境(Production)モードでの実行の二種類です。

実際にwebpackコマンドを実行して確認してみました。buildフォルダの中を空にしてはじめます。

コマンドを実行すると・・・

無事にbuildが実行されてbundle.jsが生成されました。

npm startのタイミングでbuildも実行したいそんなときは次のように記載すればいいみたいです。

たとえば追加前でこういうスクリプトの場合、webpack-dev-serverコマンドを実行。かつ--inlineなどのオプションを指定。という感じです。

"start:dev": "webpack-dev-server --inline --content-base public --history-api-fallback",

ここにwebpackを追加することで、webpackコマンドを一緒に実行してくれるようになりました。

"start:dev": "webpack && webpack-dev-server --inline --content-base public --history-api-fallback",

複数のコマンドを記載するときは、&&で区切ればいいみたいです。

サンプルコード