NormalModuleReplacementPlugin
을 사용하면 resourceRegExp
와 일치하는 리소스를 newResource
로 교체할 수 있습니다. newResource
가 상대적인 경우 이전 리소스를 기준으로 해결됩니다. newResource
가 함수인 경우 제공된 리소스의 요청 속성을 덮어쓸 것으로 예상됩니다.
이는 빌드 간에 다른 동작을 허용하는 데 유용할 수 있습니다.
new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource);
resourceRegExp
는 확인된 리소스가 아니라 코드에 작성한 요청에 대해 테스트 됩니다. 예를 들어, import sum from './sum'
코드가 있을 때 './sum.js'
대신 './sum'
이 테스트에 사용됩니다.
또한 Windows를 사용할 때는 다른 폴더 구분 기호를 사용해야 합니다. 예를 들어 /src\/environments\/environment\.ts/
는 Windows에서 작동하지 않기 때문에, /src[\\/]environments[\\/]environment\.ts/,
를 대신 사용해야 합니다.
개발 환경용으로 빌드할 때 특정 모듈을 교체합니다.
some/path/config.development.module.js
설정 파일과 some/path/config.production.module.js
에 프로덕션용 특수 버전이 있다면
프로덕션용으로 빌드할 때 다음 플러그인을 추가합니다.
new webpack.NormalModuleReplacementPlugin(
/some\/path\/config\.development\.js/,
'./config.production.js'
);
지정된 환경에 따른 조건부 빌드에 관한 내용입니다.
다른 빌드 대상에 대한 특정 값이 포함된 설정을 원한다고 가정해 보겠습니다.
module.exports = function (env) {
var appTarget = env.APP_TARGET || 'VERSION_A';
return {
plugins: [
new webpack.NormalModuleReplacementPlugin(
/(.*)-APP_TARGET(\.*)/,
function (resource) {
resource.request = resource.request.replace(
/-APP_TARGET/,
`-${appTarget}`
);
}
),
],
};
};
2개의 설정 파일을 생성합니다.
app/config-VERSION_A.js
export default {
title: 'I am version A',
};
app/config-VERSION_B.js
export default {
title: 'I am version B',
};
그다음 정규 표현식에서 찾고 있는 키워드를 사용하여 해당 설정을 가져옵니다.
import config from 'app/config-APP_TARGET';
console.log(config.title);
이제 빌드하려는 대상에 따라 올바른 설정을 가져올 수 있습니다.
npx webpack --env APP_TARGET=VERSION_A
=> 'I am version A'
npx webpack --env APP_TARGET=VERSION_B
=> 'I am version B'