webpack設定で設定値を設定し、反応コンポーネントからアクセスします

Question

私は異なるブランドのプロジェクトに取り組んでいます。私は1つの一般的なwebpack.config.jsと各ブランドの異なる設定ファイルを持っています。以下は1つのブランドの例です。私が持っている必要がありますどのような

webpack.config.brand1.js

const pageTemplates = require('./page.templates.brand1.js'); 
let config = require('../../webpack.config.js'); 

// Set entry point 
config.entry.app = './scripts/brands/brand1.js'; 

// Load in page templates 
config.plugins.push(...pageTemplates); 

module.exports = config; 

brand1.js

import $ from 'jquery'; 

import { LocationChecker } from '../common'; 

import '../../styles/brand1.scss'; 

$(() => { 
    new LocationChecker(); 
}); 

変数である（ブランド名の値と。例えば。brand1）をすることができます反応成分に輸入する。ブランド名に応じて値を確認したり、セクションを非表示にすることができます。私はビルドレベルでこの変数を設定し、私の反応コンポーネントにアクセスしたいと思います。あなたはどうしますか？注：私は、プラグインが、グローバル定数を定義していない、その名前とは異なり示唆可能性があります、これを行う最も簡単な方法は、DefinePluginでおそらくWebPACKの2

Answer 1

を使用しています：

config.plugins.push(
    ...pageTemplates, 
    new webpack.DefinePlugin({BRAND: JSON.stringify('brand1')}) 
); 

（またはあなたはグローバルBRAND定数をしたくない場合はconfig/brand1/Config.js、config/brand2/Config.jsなど、あなたのソースディレクトリ外に作成することができ、あるいは、各pageTemplates）

にプラグインを追加し、

で適切なパスを追加します

config.resolve.modules.push(path.resolve(__dirname, 'config/brand1')) 

Config.jsをインポートするだけで、ブランド固有の定義にアクセスできます。