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") })