구성에 기반한 Webpack 다중 번들

Question

Webpack에서 약간 작업했습니다. 다중 번들을 할 사람이 여러 진입 점에 달려 있다는 것을 알고 있지만 새로운 상황이 있습니다.

우리 프로젝트 중 하나는 3 개국에 대한 단일 코드베이스 (3 개의 다른 URL과 다른 URL 구조)입니다. 우리는 C1, C2, C3에 대한 공통 코드와 코드 세트를 가지고 있습니다. 나는 하나의 빌드를 실행하고이 개 다른 파일에 ES6 코드를 컴파일,

app-common.js, c1-common.js, c2-common.js처럼 c3-common.j2

또는

c1-app.js

, c2-app.js, c3-app.js 일반 및 특정 JS을 할 싶어 구성에 대한 코드 baesd. 어떤 번들과 바인딩 할 파일과 같은가?

기존의 방법이나이를 수행 할 수있는 방법이 있습니까? 누구든지 어떤 아이디어 나 자원으로도 도와 줄 수 있습니까? 사전

Ariful

Answer 1

에서

덕분에 당신은 당신의 지역화 된 코드에 대한 단일 연결 지점 항목 파일을 생성하고 사용자 환경 변수에 따라 조건부 require 진술을 할 수 있습니다. 코드에서 다음

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 블록은 데드 코드로 간주되어 minifier에 의해 제거됩니다.