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",
複数のコマンドを記載するときは、&&で区切ればいいみたいです。