Question

我一直在尝试使用import（）函数来导入在运行时动态的东西。我会认为，只要为文件创建一个条目，webpack就会足够聪明来import（）正确的模块，但事实并非如此。

有人知道一种方法来分块一个条目并使用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

它不起作用，因为尽管它被称为“动态导入”，但它并未遵循该词的含义。 “动态”导入的想法是能够在运行时动态导入某些内容，但这里有一个警告：必须知道要导入的模块。

由于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（）？

2 个答案: