webpackでdevelopmentとproductionの判定

よく見かけるのはwebpack.production.config.jsファイルを生成して使い分けしますが二重管理が面倒になってくるので1ファイルでまとめてみました。

サンプルコード

私はgulp+webpackの環境を作ってるのでそのサンプルになりますが基本的にはwebpack単体でも同じような記述でいけるはずです。

gulp

gulpfile.js

var gulp = require("gulp"),
	webpack = require("webpack"),
	gulpWebpack = require("gulp-webpack"),
	path = require("path");

// 環境情報から状態を判定
var PROD = JSON.stringify(process.env.NODE_ENV === "production");

gulp.task("js", function() {
	gulp.src("")
		.pipe(gulpWebpack({
			context: path.join(__dirname, "js"),
			entry: {
				app: "./app.js"
			},
			output: {
				filename: "[name].min.js"
			},
			// 圧縮処理
			plugins: PROD ? [
				new webpack.DefinePlugin({
					"process.env.NODE_ENV": JSON.stringify("production")
				}),
				new webpack.optimize.DedupePlugin(),
				new webpack.optimize.UglifyJsPlugin({
					compress: {
						warnings: false,
						screw_ie8: true
					}
				}),
				new webpack.optimize.OccurenceOrderPlugin(),
				new webpack.optimize.AggressiveMergingPlugin()
			] : [],
			module: {
				loaders: [
					{
						test: /\.js[x]?$/,
						exclude: /node_modules/,
						loader: "babel",
						query: {
							presets: ["react", "es2015"]
						}
					}
				]
			},
			// ソースマップの出力
			devtool : PROD ? "source-map" : "",
			resolve: {
				extensions: ["", ".js", ".jsx"]
			}
		})
		.pipe(gulp.desc("../js"));
});

gulp.task("defualt", function() {
	gulp.watch("./js/**/*.*", ['js'])
});

修正した箇所は単純にNODE_ENVの変数を受け取って処理を分けています。

npm script

package.json

"scripts": {
	"build": "NODE_ENV=production gulp js"
}

使い方

# 開発時はそのままgulpを実行
> gulp

# 納品時はnpm scriptを実行
> npm run build

まとめ

webpackのUglifyJsが遅くて開発のときから常に圧縮してるとストレスになるので初めはproduction用のファイルを生成していましたが書いてる内容がほぼ一緒なのでそれはそれで面倒になってきます。
是非試してみてください。