Question

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.js' 在评估时（在./src延迟递归（index.js：96）,: 5:11处评估）（匿名）@ src惰性名称空间对象？4252：5 Promise.then（异步）开始@ index.js？b635：4

我也尝试过const files = ['./src/foo.js'];，但还是一样。

问题是，是否可以使用webpack 4实现这种动态的按需导入？

Answer 1

它称为"Code splitting with dynamic context"。导入将与webpack一起使用的方式是，这些按需的必需块将仅在需要时由webpack随需“自动加载”。

关键是，正如@Batista指出的那样，此导入具有一个promise结果，该结果包装在默认属性中，因此您可以：

f.transform_values { |v| v.max_by { |h| h[:cost] } }
  # => {1=>{:name=>"John Doe3", :number=>1, :cost=>100},
  #     2=>{:name=>"John Doe2", :number=>2, :cost=>300}}

这样做，您不需要将其添加到入口点，唯一的警告是不会生成具有“固定”名称的捆绑包，要生成名称，您可以添加：

async function start() {
  const files = ['./foo.js'];
  const s = await import(files[0]);
  console.log(new s.default());
}

您不需要手动将其添加到您的webpack中，这些将由webpack加载。

Answer 2

解决方案是在反引号（模板文字语法）中使用<comClass progid="Calculator" clsid="{96D7B70E-A084-4EE5-9FDE-AEEDB0C61B9B}" threadingModel="Apartment"> </comClass>。即使import(`${files[0}`)是一个字符串，也无法使用import(files[0])。

不知道为什么，如果有人回答？

Answer 3

您是否尝试过使用诺言？

import("module/foo").then(foo => console.log(foo.default))

Webpack 4动态和按需导入

3 个答案: