时间戳

首页 > 解决方案 > Webpack 4 动态和按需导入

webpack - Webpack 4 动态和按需导入

问题描述

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'
  }
}

当我运行此代码时，单击按钮后，出现以下错误

未捕获（承诺）错误：在 eval 处找不到模块 './foo.js'（eval 在 ./src 惰性递归（index.js:96），:5:11）（匿名）@ src 惰性命名空间对象？4252 :5 Promise.then (async) start @ index.js?b635:4

我也试过const files = ['./src/foo.js'];但同样。

问题是，有没有可能用 webpack 4 实现这种动态的按需导入？

标签： webpack

解决方案

它被称为“动态上下文的代码拆分”。导入将与 webpack 一起使用的方式是，这些按需所需的块将由 webpack 按需“自动加载”，仅在需要时。

关键是，正如@Batista 指出的那样，这个导入有一个结果是一个承诺，它被包装到一个默认属性中，所以你可以：

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 加载。

推荐阅读