在 webpack 配置中设置配置值并从反应组件访问它

Question

我正在做一个不同品牌的项目。我有一个通用的 webpack.config.js 以及每个品牌的不同配置文件。以下是一个品牌的示例。

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）。这样我就可以根据品牌名称检查值和 hide/show 部分。我想在构建级别设置此变量并在我的反应组件中访问它。你会怎么做？注意：我使用的是 webpack 2

Answer 1

最简单的方法可能是使用 DefinePlugin，它不像它的名字所暗示的那样，它没有定义插件而是全局常量：

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

（或将插件添加到每个pageTemplates）

或者，如果您不需要全局 BRAND 常量，您可以在源目录之外创建 config/brand1/Config.js、config/brand2/Config.js 等，并使用

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

然后您只需导入 Config.js 即可访问特定于品牌的定义。

在 webpack 配置中设置配置值并从反应组件访问它

Setting a config value in webpack config and access it from react component

webpack

webpack-2