是否可以在 webpack 中使用真正动态的 import()？

Question

我一直在尝试使用 import() 函数导入运行时动态的内容。我认为只要我为文件创建一个条目，webpack 就可以足够聪明地导入（）正确的模块，但事实似乎并非如此。

有谁知道将条目分块并使用 import() 语法、为其提供变量并使其在运行时运行的方法？

根问题的简单例子如下：

// works
import( './a.js' ).then(() => console.log('it worked'));

// something is a dynamic variable that changes at runtime
const something = './a.js';
// does not work, even with this simplistic example
import( something ).catch(() => console.log('it did not work'));

Answer 1

它不起作用，因为尽管它被称为 "dynamic import"，但它并不遵循这个词的意思。 "dynamic" 导入的想法是能够在运行时动态导入一些东西，但这里需要注意：必须知道要导入的模块。

由于 webpack 进行静态分析以对这些 import() 语句进行延迟加载，因此一切都必须是已知的和可预测的，否则 webpack 将无法动态创建异步块。这就是为什么向导入添加变量不起作用的原因。

Answer 2

是啊，这个 webpack 有点奇怪。真正的动态导入不起作用。我们可以将字符串模板放在 import 语句中，但是放置变量名会引发依赖性警告。

这是我能达到的最接近的结果 - 放置 if 条件或 switch case 或字符串模板，然后在其中写入导入。

类似 -

const getModule = (filename) => {return import(`directoryPath/${fileName}`);}

或

const something = 'a.js';

if (something === 'a.js') {
  return import(`./${something}`); // promise
} else if (something === 'b.js'){
  .........
}

动态导入有这个问题 - webpack 在这些条件下捆绑所有可能的文件，这并不酷。

是否可以在 webpack 中使用真正动态的 import()？

Is it possible to have a truly dynamic import() in webpack?

javascript

dynamic-import

webpack