Help us understand the problem. What is going on with this article?

webpackでdevelopmentとproductionの判定

More than 3 years have passed since last update.

よく見かけるのは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用のファイルを生成していましたが書いてる内容がほぼ一緒なのでそれはそれで面倒になってきます。
是非試してみてください。

yaaah93
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした