プロダクションビルド

webpackでは開発向けのビルドとプロダクション向けのビルドを切り替えることができます。自分でカスタマイズすることもできますが、まずはwebpackが用意している-pオプションの動きを見てみましょう。

package.jsonの修正

下記を追加します。

{
  "scripts": {
    "build-bundle-js-for-prod": "webpack -p --module-bind js=babel-loader src/index.js public/bundle.js"
  }
}

$ npm run build-bundle-js-for-prod

でビルドしてから、bundle.jsの中身を眺めてみましょう。 minificationが効いているはずです。

-pオプション以外にもカスタマイズ可能な様々な方法があります。