使用 webpack 和 Angular 进行动态导入，找不到一些？答案

【问题标题】：Dynamic imports with webpack and angular, Cannot find some?使用 webpack 和 Angular 进行动态导入，找不到一些？
【发布时间】：2020-07-01 16:28:50
【问题描述】：

我使用 angular 6 和 webpack 4 来动态导入 webpackchunk，特别是从 scrollmagic 和“TimelineMax”、“TweenMax”、“TweenLite”等所有 TWEENS 中导入“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})

【问题讨论】：

标签： angular webpack dynamic-import

【解决方案1】：

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

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

例如

【讨论】：