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

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

它相当脆弱，但现在可以用了。

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

How do I hot reload a module wrapped in a native import context?

javascript

webpack

webpack-hmr

hot-module-replacement