Webpack魔法注释问题：生产构建导入JSON语言包时e.exports为空

1. 标记JSON文件为有副作用（最可能解决） #

Webpack生产环境的tree shaking会默认认为JSON文件无副作用，动态导入时可能被优化为空模块。在项目根目录的package.json中添加：

"sideEffects": ["**/*.json"]

这会告诉Webpack不要对JSON文件进行tree shaking优化，保留完整内容。

2. 显式配置Webpack的JSON解析规则 #

在webpack.config.js里明确指定JSON文件的处理方式，避免默认解析逻辑的异常：

module.exports = {
  module: {
    rules: [
      {
        test: /\.json$/,
        type: 'json',
        parser: {
          // 强制使用原生JSON解析，避免自定义解析导致的问题
          parse: JSON.parse
        }
      }
    ]
  },
  // 配合魔法注释确保chunk命名符合预期（可选）
  output: {
    chunkFilename: '[name].js'
  }
};

3. 验证JSON文件格式 #

确保语言包JSON没有语法错误，比如JSON不允许的 trailing comma（末尾逗号），Webpack解析错误时可能输出空对象。可以用在线JSON校验工具检查文件格式。

补充：替代方案（若以上无效） #

虽然你已经试过将JSON改为JS文件可行，但可以用脚本批量转换，避免手动修改：
创建convert-locales.js脚本：

const fs = require('fs');
const path = require('path');

const localesDir = path.resolve(__dirname, './src/locales');

fs.readdirSync(localesDir).forEach(file => {
  if (file.endsWith('.json')) {
    const jsonContent = fs.readFileSync(path.join(localesDir, file), 'utf8');
    const jsContent = `export default ${jsonContent};`;
    fs.writeFileSync(path.join(localesDir, file.replace('.json', '.js')), jsContent);
  }
});

运行脚本批量生成对应JS模块，再修改导入路径为.js即可。

内容的提问来源于stack exchange，提问作者TheLearningDev