読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

React:webpack.config.jsについて

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


Reactの開発ではこんなJSファイルをつくっていくと思います。
f:id:tyoshikawa1106:20160521132110p:plain


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


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


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

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


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


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


実際にwebpackコマンドを実行して確認してみました。buildフォルダの中を空にしてはじめます。
f:id:tyoshikawa1106:20160521133201p:plain:w200


コマンドを実行すると・・・
f:id:tyoshikawa1106:20160521133301p:plain


無事にbuildが実行されてbundle.jsが生成されました。
f:id:tyoshikawa1106:20160521133334p:plain


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


たとえば追加前でこういうスクリプトの場合、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",


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

サンプルコード