为什么我不能使用变量中的字符串加载模块？

【问题标题】：Why can I not load a module using a string in a variable?为什么我不能使用变量中的字符串加载模块？
【发布时间】：2020-10-05 03:41:04
【问题描述】：

下面将使用import('test') 成功加载模块，但不是第二个示例。它们使用默认的 Webpack 配置在 Angular 9 应用程序中运行。

var testModuleName = 'test';
import('test').then(o => console.log('I loaded test from string'));
import(testModuleName).then(o => console.log('I loaded test from var'));

【问题讨论】：

标签： javascript angular module

【解决方案1】：

Webpack 必须知道在构建时导入模块的至少一部分位置。这是捆绑所必需的。例如：

const inputComponent = 'dropdown'
import(`./inputs/${inputComponent}.component`)

在这种情况下它会起作用，但inputs 目录中的所有内容都将添加到 bundle 中，即使 inputComponent 是 const。这样一来，您将失去 treeshaking。

您还可以使用 Magic Comments 过滤将包含在捆绑包中的内容：

const inputComponent = 'dropdown'
import(
    /* webpackExclude: REGEX OF FILE NAMES TO EXCLUDE */
    `./inputs/${inputComponent}.component`
)

您可以阅读更多关于 webpack 如何处理模块的信息here。

【讨论】：