webpack config에서 구성 값을 설정하고 반응 구성 요소에서 액세스하십시오.

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) 수 반응 성분으로 수입 될 수있다. 그래서 브랜드 이름에 따라 값을 확인하고 섹션을 숨기거나 표시 할 수 있습니다. 이 변수를 빌드 레벨에서 설정하고 내 반응 구성 요소에 액세스하려고합니다. 어떻게 그럴 수 있니? 나는 이것이 그 이름이 제안 할 수는 달리, 플러그인하지만 전역 상수 정의하지 않습니다, DefinePlugin와 아마 할

Answer 1

가장 쉬운 방법은 웹팩 2를 사용하고 있습니다 : 참고 :

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

을 (또는 당신이 글로벌 BRAND 일정을 원하지 않는 경우 config/brand1/Config.js, config/brand2/Config.js 등 소스 디렉토리 외부 만들 수 있습니다, 또는 각 pageTemplates)

에 플러그인을 추가하고

,617으로 적절한 경로를 추가

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

그러면 Config.js을 가져 와서 브랜드 별 정의에 액세스 할 수 있습니다.