使用webpack是否可以按需导入并使用动态名称？例如，如果我有这样一段代码
./src/index.js
function start() {
const files = ['./foo.js'];
const s = import(files[0]);
console.log(new s());
}
document.getElementById('button').onclick = start;
./src/foo.js
export class Foo {}
index.html
<body>
<button id="button">Click</button>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="foo.js"></script>
</body>
webpack.config.js
module.exports = {
entry: {
index: './src/index.js',
foo: './src/foo.js'
}
}
当我运行这个代码时，在我点击我的按钮后，我有以下错误
未捕获(承诺中(错误：找不到模块"/foo.jsat eval(eval at./src lazy recursive(index.js:96(，：5:11((匿名(@src惰性名称空间对象？4252:5Promise.then(异步(启动@index.js？b635:4
我也尝试过const files = ['./src/foo.js'];，但相同。
问题是，有可能用webpack 4实现这种动态按需导入吗？
它被称为"带动态上下文的代码拆分"。导入将与webpack一起工作的方式是，这些按需需要的块将由webpack按需"自动加载"，只有在需要时。
关键是，正如@Batista所指出的，这个导入的结果是一个promise，它被包装到一个默认属性中，所以你可以：
async function start() {
const files = ['./foo.js'];
const s = await import(files[0]);
console.log(new s.default());
}
通过这样做，您不需要将其添加到入口点，唯一需要注意的是，is不会生成具有"固定"名称的捆绑包，要生成名称，您可以添加：
...
import(/* webpackChunkName: "mychunk" */ files[0])
...
你不需要手动将它们添加到你的webpack中，它们将由webpack加载。
解决方案是使用带有backtick(模板文本语法(的import(`${files[0}`)。即使files[0]是一个字符串，使用import(files[0])也不起作用。
不知道为什么，如果有人作为答案？
您是否尝试过使用promise？
import("module/foo").then(foo => console.log(foo.default))