[解決済み] Webpackを使った環境による条件付きビルド

質問

開発用にモックなどを作っているのですが、配布するビルドファイルが肥大化しないようにしたいです。

RequireJSでは、プラグインファイルで設定を渡し、それに基づいて条件付きで物事を要求することができます。

webpackでは、これを行う方法はないようです。まず、ある環境の実行時設定を作成するために、私はこれまで resolve.alias を使って、環境に応じて require を再指定しています。

// All settings.
var all = {
    fish: 'salmon'
};

// `envsettings` is an alias resolved at build time.
module.exports = Object.assign(all, require('envsettings'));

そして、webpack の設定を作成する際に、動的にどのファイル envsettings が指すファイルを動的に指定できます (つまり webpackConfig.resolve.alias.envsettings = './' + env ).

しかし、私は次のようなことをしたいのです。

if (settings.mock) {
    // Short-circuit ajax calls.
    // Require in all the mock modules.
}

しかし、明らかにモックでない環境では、これらのモックファイルでビルドしたくありません。

resolve.aliasを使用して手動でこれらのすべてのrequireをスタブファイルに再指定することができるかもしれません - しかし、より厄介でないと感じる方法はありますか？

どのようにそれを行うことができます任意のアイデア？ありがとうございます。

どのように解決するのですか？

あなたは 定義プラグイン .

webpackのビルドファイルで、以下のような簡単な操作で使っています。 env は設定のオブジェクトをエクスポートするファイルへのパスです。

// Webpack build config
plugins: [
    new webpack.DefinePlugin({
        ENV: require(path.join(__dirname, './path-to-env-files/', env))
    })
]

// Settings file located at `path-to-env-files/dev.js`
module.exports = { debug: true };

そして、あなたのコードに次のように記述します。

if (ENV.debug) {
    console.log('Yo!');
}

この条件が偽の場合、ビルドファイルからこのコードを削除します。動作中の Webpack のビルドの例はこちら .