Webpack 번들링 UMD 모듈

배경

Webpack은 esm , cjs , amd out of box를 지원하는 모듈 번들러입니다. 그러나 전역 종속성을 기대하고 모듈 시스템 대신 네임스페이스에 의존하는 레거시 웹 앱에서 마이그레이션하는 경우 해결해야 할 몇 가지 문제가 있을 수 있습니다.

문제

발생할 수 있는 일반적인 문제 중 하나는 설치된 노드 종속성 중 일부가 umd 형식으로 배포된다는 것입니다. 예를 들어

// Example importer
import 'moment/min/locales';

// pre bundle
(function (root, factory) {
    if ( typeof define === 'function' && define.amd ) {
        define([], factory(root));
    } else if ( typeof exports === 'object' ) {
        module.exports = factory(root);
    } else {
        root.myPlugin = factory(root);
    }
})(typeof global !== "undefined" ? global : this.window || this.global, function (root) {
    ...
})

// post bundle
(function(module) {
    !function(a, b) {
        true ? module.exports = b() : undefined
    }
        ...
})

번들을 브라우저에 로드할 때 module.exports = b() 대신 root.myPlugin = factory(root);가 로드되었습니다. 그 이유는 UMD가 추가 빌드 단계 없이 브라우저나 노드에서 직접 실행되기 때문입니다.

해결책

https://v4.webpack.js.org/loaders/script-loader/ 가장 간단하고 순진한 방법입니다. 스크립트 태그를 통해 직접 스크립트를 로드하는 것으로 생각하십시오. 웹 보안 문제가 없는 경우 가장 좋은 솔루션이 될 수 있습니다. 가장 큰 단점은 배후에서 eval를 사용하고 eval가 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy에 의해 차단된다는 것입니다.

https://webpack.js.org/loaders/imports-loader/ 전역 종속성을 가져올 수 있는 방법을 보다 세부적으로 제어할 수 있습니다. 다음 예는 그 힘을 알려줍니다.

// webpack.config
use: {
    loader: 'imports-loader',
    options: {
      wrapper: {
        thisArg: 'window',
        args: {
          module: false,
          exports: false,
          define: false,
        },
      },
    },
  },
},

// broken bundle
(function(module) {
    !function(a, b) {
        true ? module.exports = b() : undefined
    }
        ...
})()

// transformed bundle
(function(module, exports, define) {

    // same as above pre bundle, w/o the broken transformation.
    // thanks to the IIFE wrapper due to the webpack config.
    (function (root, factory) {
        if ( typeof define === 'function' && define.amd ) {
            define([], factory(root));
        } else if ( typeof exports === 'object' ) {
            module.exports = factory(root);
        } else {
            root.myPlugin = factory(root);
        }
    })(typeof global !== "undefined" ? global : this.window || this.global, function (root) {
        ...
    })

})(false, false, false)

유용할 수 있는 기타 리소스

https://webpack.js.org/guides/shimming/ 필요한 로더에 대한 포괄적인 가이드

https://webpack.js.org/loaders/expose-loader/ : 전역 변수로 노출되는 cjs 모듈용