webpack

웹팩(webpack)은 웹에 사용되는 모든 자원을 번들링(bundling)해주는 도구이다.

이번에 웹팩으로 js를 번들링하면서 Defineplugin, NormalModuleReplacementPlugin을 사용해보게 되면서 간략하게 정리하고자 한다.

번들링은 여러 파일을 묶어 더 적은 수의 파일로 압축시키는 과정이다. 이를 통해 코드 난독화, 로딩 속도 향상, HMR(코드를 수정하면 바로 웹에 적용되는 기술)을 얻을 수 있다.

또한 여러 설정을 통해 원하는대로 번들링할 수 있는데, 이를 가능케하는 것 중 하나가 플러그인이다.

Defineplugin은 빌드 타임에 변수를 주입해 웹 코드 내에서 전역적으로 사용할 수 있다. 나의 경우는 사용자의 웹 실행 환경을 nodejs에서 제공하는 os 모듈을 통해 os.type()을 전역 변수로 사용할 수 있게끔 만들었다.

NormalModuleReplacementPlugin은 빌드 타임에 인자를 통해 조건에 따라 빌드할 파일을 선택할 수 있다.

기본적인 형태는 다음과 같다.

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번째 인자에서 바꿀 인자를 언급하고 $를 이용해 사용한 정규식을 적용할 수도 있다.

참조 : https://webpack.js.org/plugins/normal-module-replacement-plugin/