Webpack Magic Comments - 当尝试在生产构建中导入语言环境 json 文件时，e.exports 为空

Question

大家好，我正在使用 Webpack 5 和 Vue 3 i18n。

我在等待导入语言环境文件时遇到了魔法注释和生产版本的问题：

const { default: messages } = await import(
            /* webpackChunkName: "locale-[request]" */ `../locales/${newLocale}.json`
        );

        i18n.global.setLocaleMessage(newLocale, messages);

在生产模式下编译时，我发现所有语言环境 json 文件都导出为空模块，如下所示：

"use strict";(self["wpJsonTestNamespace"]=self["wpJsonTestNamespace"]||[]).push([[12841],{43478:function(e){e.exports={}}}]);

而不是在导出中包含任何区域设置键和值。

我尝试过 json 加载器，禁用 babel，简化 webpack 配置。

如果有人对此了解更多或在野外见过它，我真的很乐意帮忙:)

如果我将语言环境文件转换为

<locale code>.js

，它们就会正确导出。

所以我的猜测是 json 并没有让 webpack 满意。

Answer 1

事实证明，webpack 中似乎存在关于延迟导入和

json

的错误，如

date-fns

和

moment

库中所报告的那样。

显式使用

json-loader

（自 webpack 2 起应该自动加载 JSON）可以纠正该问题，因为它强制 Webpack 不对 json 输出进行树形抖动。

禁用优化

usedExports: false

也解决了这个问题，所以看起来Vue自动摇树json文件的某种组合，因为它认为它们没有被使用

json-loader

迫使它再次注意到它们

所以添加

configureWebpack: {
      module: {
          rules: [
              ...<other rules>
              {
                  test: /\.json$/,
                  loader: 'json-loader',
                  type: 'javascript/auto'
              }
           ]
      },
      output: ....
}

还将语言环境转换为

js

文件也有效