Webpack 4动态和按需导入

问题描述 投票:3回答:3

是否可以使用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
3个回答
0
投票

它被称为“具有动态上下文的代码分割” 。 导入与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加载。


0
投票

解决方案是使用import(`${files[0}`)和反引号(模板文字语法)。 即使files[0]是一个字符串,使用import(files[0])也不起作用。

不知道为什么,如果有人作为答案?


-1
投票

您是否尝试过使用承诺?

import("module/foo").then(foo => console.log(foo.default))
© www.soinside.com 2019 - 2024. All rights reserved.