Laravel Mix与Webpack加载JSON文件失败：Webpack自动添加.js后缀

你遇到的这个问题，核心是Webpack的文件后缀解析逻辑在搞鬼——它明明该找vehicles.json，却跑去搜vehicles.json.js，这大概率和Webpack的resolve.extensions配置脱不了干系。

问题根源 #

Webpack的resolve.extensions选项，决定了它会自动给导入路径补全哪些后缀。如果你的配置满足这两个条件之一，就会触发这个错误：

• 配置里压根没包含.json后缀，Webpack只会默认尝试.js这类常见后缀；
• .js后缀排在.json前面，Webpack会优先给你的导入路径加上.js，把vehicles.json变成vehicles.json.js，自然找不到文件。

具体解决方案 #

1. 修正Webpack的后缀解析配置

打开你的Webpack配置文件（一般是webpack.config.js），找到resolve配置项，确保.json被加入extensions数组，而且建议把它放在靠前的位置，避免优先匹配错误后缀：

module.exports = {
  // ...其他项目配置
  resolve: {
    extensions: ['.json', '.js', '.jsx'] // 可根据你的项目需求调整其他后缀
  }
};

要是你用的是Webpack 5，它默认支持JSON文件导入，但如果手动覆盖了resolve.extensions，就必须显式加上.json，否则Webpack会直接忽略这个后缀的文件。

2. 临时替代方案：转成JS模块

如果暂时不想改Webpack配置，也可以把vehicles.json改名为vehicles.js，然后在文件里直接导出JSON对象：

// vehicles.js
export default {
  // 原JSON文件里的所有内容
};

之后导入时可以写成：

import vehicleTypes from '../data/vehicles';

Webpack会自动匹配.js后缀，这样也能正常工作，但这只是临时 workaround，更推荐从配置层面彻底解决问题。

额外提醒 #

确认文件路径完全正确——你已经确认文件名是vehicles.json，所以重点还是放在Webpack的后缀解析配置上。修改配置后记得重启Webpack开发服务器，确保新配置生效。

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