WebpackでReactを本番反映する時に行う設定

webpackの各種プラグインを導入

DefinePluginでprocess.env.NODE_ENVを置換する

特定の文字を任意の文字に置き換えることのできるプラグインです。

たとえば、

//webpak.config.js
plugins: [
      new webpack.DefinePlugin({
        'process.env':{
          'NODE_ENV': JSON.stringify('production')
        }
      }),
],

という定義があった時に、Reactのコード内の

if process.env.NODE_ENV !== ‘production’ { 
  //開発環境用のコード
}

は

if ‘production’ !== ‘production’ {
  //開発環境用のコード
}

に置き換えられる。

この設定単体だとダメで、後述のUglifyJSPluginと組み合わせることで、 未到達のコードは削除されてファイル容量を削減することができます。

UglifyJsPluginでJSをminifyする

minifyとは、コメントや改行,スペースを削除したり、変数名を短くして無駄な部分を取り除くことです。

//webpak.config.js
plugins: [
      new webpack.DefinePlugin({
        'process.env':{
          'NODE_ENV': JSON.stringify('production')
        }
      }),
      new webpack.optimize.UglifyJsPlugin()

とすると、

  WARNING in xx.js from UglifyJs
    Condition always false [./~/react/lib/React.js:29,0]
    Dropping unreachable code [./~/react/lib/React.js:29,0]
    Declarations in unreachable code! [./~/react/lib/React.js:30,0]
    Condition always false [./~/react/lib/React.js:44,0]

のような警告文が大量にでることがあるので、

//webpak.config.js
plugins: [
      new webpack.DefinePlugin({
        'process.env':{
          'NODE_ENV': JSON.stringify('production')
        }
      }),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        },
        comments: require("uglify-save-license")
      })

にして、警告文を非表示にします。 またuglify-save-license を使うことでライセンスのコメントは残す設定も入れておきましょう。

その他

あとは環境に応じて、APIのリクエスト先を変えるような場合 以下のようにして置き換えられるようにしておくと良いと思います。

//webpak.config.js
plugins: [
      new webpack.DefinePlugin({
        'process.env':{
          'NODE_ENV': JSON.stringify('production'),
　　   'API_URL': 'https://api.xxx.com'
        }
      }),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        },
        comments: require("uglify-save-license")
      })