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），可以在反应组件中导入。因此我可以根据品牌名称检查值并隐藏/显示部分。我想在构建级别设置此变量并在我的react组件中访问它。你会怎么做？注意：我正在使用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配置中设置配置值并从反应组件

1 个答案: