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

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

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

export default (env) => {
  const appTarget = env.APP_TARGET || "VERSION_A";
  return {
    plugins: [
      new webpack.NormalModuleReplacementPlugin(/-APP_TARGET$/, (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'