Question

文件@/lang/index.js具有以下功能：

async function fetchMessages(locale) {
  const module = await import(/*
    webpackChunkName: "lang/[request]",
    webpackExclude: /index/
  */ `@/lang/${locale}`)

  return module.default
}

我想热重载此功能导入的模块。我尝试了module.hot.accept()的几种不同版本，但没有成功。

这是我无法正常工作的文件的末尾的热重装代码：

if (process.env.NODE_ENV !== "production" && module.hot) {
  module.hot.accept(["./en-US"], () => {
    const { locale } = i18n
    fetchMessages(locale).then((strings) => {
      i18n.setLocaleMessage(locale, strings)
    })
  })
}

有什么想法吗？当检测到更改时，我想热重载我的语言文件。

谢谢！

Answer 1

Webpack当前对此“错误”有一个未解决的问题。经过一番搜索，我发现了Webpack#8637。

该页面上的一些解决方法包括：

创建一个包含导入上下文的单独文件，接受该单独文件。
使用module.hot.accept(module.children[0].id, ...)

我当前正在使用的解决方案是找到上下文的生成的标识符，并将其保存到变量中，然后像这样传递给module.hot.accept()：

const asyncChunkId = "./src/lang lazy recursive ^\\.\\/.*$ exclude: index"
module.hot.accept(asyncChunkId, () => { /* ... */ })

这很脆弱，但是现在可以完成工作。

如何热重新加载包装在本机导入上下文中的模块？

1 个答案: