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

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 目前有一个针对此“bug”的未解决问题。经过一番搜索，我发现了Webpack#8637 。

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

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

我当前使用的解决方案是我找到了上下文的生成标识符，并将其保存到传递到的变量中，module.hot.accept()如下所示：

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

它相当脆弱，但目前可以完成工作。