設定に基づいたWebpack複数のバンドル

Question

Webpackで少し作業しました。私は複数のバンドルを行う人が複数のエントリーポイントに依存することを知っていますが、私は新しい状況があります。

私たちのプロジェクトの1つは、3つの異なる国の単一のコードベース（3つの異なるURLと異なるURL構造）です。 C1、C2、C3の共通コードとコードを設定しています。私は、単一のビルドを実行し、

app-common.jsのような2つの異なるファイル、c1-common.js、c2-common.jsにES6コードをコンパイルし、c3-common.j2共通および特定のjsを持っています

それとも

c1-app.js、c2-app.js、c3-app.jsしたいです構成上のコードbaesd。どのバンドルとバインドするかのようなファイル。

既存の方法やこれを実現する方法はありますか？誰でもどんなアイデアやリソースでも助けてくれますか？アドバンス

Ariful

Answer 1

で

おかげであなたはローカライズされたコードのための単一のポイントオブエントリーファイルを作成し、カスタム環境変数に基づく条件require文を行うことができます。次に、あなたのWebPACKの設定でそれを設定します。

new webpack.DefinePlugin({ 
    'process.env.COUNTRY_CODE': 'fr' 
}), 

次に、あなたのコード内で：

let i18n_config; 
const country = process.env.COUNTRY_CODE || 'en'; 

if (country === 'en') { 
    i18n_config = require("./i18n/en.js"); 
} 
if (country === 'fr') { 
    i18n_config = require("./i18n/fr.js"); 
} 

あなたはさらに行くとデッドコードを削除するために積極的なminifierを使用することができます。

const isEN = country === 'en'; 
const isFR = country === 'fr'; 

if (isEN) { 
    i18n_config = require("./i18n/en.js"); 
} 
if (isFR) { 
    i18n_config = require("./i18n/fr.js"); 
} 
// ... and so on 

ifの文はif (true) {...}またはif (false) {...}にコンパイルされます。 falseブロックはデッドコードとみなされ、ミニファイアによって削除されます。