使用 webpack 和 angular 动态导入，找不到一些？

Question

我正在使用 angular 6 和 webpack 4，以便从 scrollmagic 和“TimelineMax”、“TweenMax”、“TweenLite”等动态导入 webpackchunk，特别是“animation.gsap”。所有这些吐温

然而，尽管路径是正确的，但它找不到它们，我通过并能够找到它们，并成功地动态导入 ScrollMagic。

我是不是遗漏了什么，谁能帮助指导我看看我是否遗漏了什么？

这是我的 Webpack 配置：

config.mode = 'development';
  config.target = 'web';
  config.devtool = '';
  config.resolve = {
    extensions: ['.ts', '.js'],
    modules: ['node_modules', './node_modules/'],
    alias: {
      'TweenLite': 'gsap/src/minified/TweenLite.min.js',
      'TweenMax': 'gsap/src/minified/TweenMax.min.js',
      'TimelineLite': 'gsap/src/minified/TimelineLite.min.js',
      'TimelineMax': 'gsap/src/minified/TimelineMax.min.js',
      'animation.gsap': 'scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js',
      'ScrollMagic': 'scrollmagic/scrollmagic/minified/ScrollMagic.min.js',
    }
  };

我也试过两种导入方式:

const importSM = normalizeCommonJSImport(
  import(/* webpackChunkName: "ScrollMagic" */ 'ScrollMagic'),
);

const importGsap = normalizeCommonJSImport(
  import(/* webpackChunkName: "animation.gsap" */ 'animation.gsap'),
);

并且：

   initAnimations(pJSONData) {
         import(/*webpackChunkName: "animation.gsap" */ "animation.gsap").then(({default: 
            animationGsap}) => {
           import(/*webpackChunkName: "TweenMax" */ "TweenMax").then(({default: TweenMax}) => {.
           import(/*webpackChunkName: "lottie" */ "lottie-web").then(({default: lottie}) => {
           import(/*webpackChunkName: "ScrollMagic" */ "ScrollMagic").then(({default: ScrollMagic})

Answer 1

我通过使用路径导入解决了这个问题，而不仅仅是块名称。

   import(/*webpackChunkName: "TweenMax" */ "gsap/src/minified/TweenMax.min.js").then(({default: TweenMax}) => {

例如

使用 webpack 和 angular 动态导入，找不到一些？

Dynamic imports with webpack and angular, Cannot find some?

dynamic-import

webpack

angular