如何在本地导入上下文中包装的模块中进行热重载？

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

有什么想法吗？我希望在检测到更改时可以热加载我的语言文件。

谢谢！

- matpie

---

我追踪到问题的根源是index.js不是en-US.js的直接父级。对于每个import()表达式，都会创建一个新的“模块”。如果我使用Webpack的内部标识符("./src/lang lazy recursive ^\\.\\/.*$ exclude: index")，那么它将起作用，但编译器将尝试将该字符串解析为模块并抛出错误。 - matpie

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, () => { /* ... */ })

它相当脆弱，但现在能够胜任工作。

- matpie