webpack5无法导入.json文件 配置json5-loader仍报错求助

问题原因 #

你目前的配置只能处理.json5后缀的文件，完全不覆盖普通.json格式文件，出现语法报错的核心原因是webpack把.json文件当成JavaScript代码来解析了，JSON的键值对语法不符合JS语法规则才会抛出Missing semicolon的错误。
出现这个问题大概率是你现有的loader规则意外命中了.json文件，最常见的情况是babel-loader的匹配规则写得太宽泛，把.json后缀也包含了进去。

解决步骤 #

1. 检查所有loader的匹配规则
   首先找到处理JS/TS的loader配置（一般是babel-loader、ts-loader等），确认它的test正则没有包含.json后缀：
   错误示例：

// 错误：正则包含了json，会把json文件交给babel解析
{
  test: /\.(js|jsx|ts|tsx|json)$/i,
  exclude: /node_modules/,
  use: 'babel-loader'
}

把正则里的|json删掉即可，修正后示例：

{
  test: /\.(js|jsx|ts|tsx)$/i,
  exclude: /node_modules/,
  use: 'babel-loader'
}

2. 不需要额外配置处理普通JSON
   webpack5原生支持JSON文件解析，只要没有其他loader命中.json文件，直接导入就能正常使用，不需要安装任何loader。
3. 如果你需要兼容JSON5语法的JSON文件
   如果你的.json文件里用到了注释、尾逗号等JSON5支持的语法，需要修改json5-loader的匹配规则，让它同时覆盖.json和.json5后缀：

rules: [
  {
    test: /\.json5?$/i,
    loader: 'json5-loader',
    type: 'javascript/auto',
    options: {
      esModule: true,
    },
  },
]

这里的type: 'javascript/auto'是为了禁用webpack默认的JSON解析逻辑，完全交给json5-loader处理。

修改完成后重启webpack服务即可正常导入JSON文件。

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