NormalModuleReplacementPlugin

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/,를 대신 사용해야 합니다.

Basic Example

개발 환경용으로 빌드할 때 특정 모듈을 교체합니다.

some/path/config.development.module.js 설정 파일과 some/path/config.production.module.js에 프로덕션용 특수 버전이 있다면

프로덕션용으로 빌드할 때 다음 플러그인을 추가합니다.

new webpack.NormalModuleReplacementPlugin(
  /some\/path\/config\.development\.js/,
  './config.production.js'
);

Advanced Example

지정된 환경에 따른 조건부 빌드에 관한 내용입니다.

다른 빌드 대상에 대한 특정 값이 포함된 설정을 원한다고 가정해 보겠습니다.

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}`
        );

        if (resource.createData) {
          resource.createData.request = resource.request;
        }
      }),
    ],
  };
};

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'