是否可以使用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'
}
}
当我运行此代码时,单击我的按钮后,出现以下错误
未捕获(在promise中)错误:无法在eval中找到模块'./foo.js'(eval at ./src lazy recursive(index.js:96),:5:11)(匿名)@src lazy namespace object?4252 :5 Promise.then(async)start @ 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());
}
通过这样做,您不需要将其添加到入口点,唯一需要注意的是,不会生成具有“固定”名称的包,要生成名称,您可以添加:
...
import(/* webpackChunkName: "mychunk" */ files[0])
...
您不需要手动将这些添加到您的webpack,这些将由webpack加载。
解决方案是使用import(`${files[0}`)
和反引号(模板文字语法)。 即使files[0]
是一个字符串,使用import(files[0])
也不起作用。
不知道为什么,如果有人作为答案?
您是否尝试过使用承诺?
import("module/foo").then(foo => console.log(foo.default))