Webpack 4中如何在Loader内修改模块类型？

我之前踩过这个一模一样的坑！Webpack 4引入的模块类型机制虽然提升了资源处理的精准度，但也给这类“输入JSON输出JS”的loader带来了冲突问题，咱们来一步步搞定它。

问题根源 #

Webpack 4会自动根据文件后缀识别模块类型：.json文件默认被标记为json类型，Webpack会尝试用JSON解析器去处理它。但messageformat-loader会把JSON源文件转换成JS代码，这就导致Webpack拿到的已经是JS内容，却还在按JSON规则解析，自然就抛出了Unexpected token的解析错误。

解决方案 #

核心思路就是告诉Webpack：不要把这个JSON文件当作JSON模块处理，允许loader把它转成JS后再解析。这里有两种实用的配置方式：

方式1：全局给目标JSON文件指定模块类型 #

如果你的项目里所有需要用messageformat-loader处理的JSON文件都需要这个规则，可以直接这么配：

module.exports = {
  module: {
    rules: [
      {
        test: /\.json$/,
        use: ['messageformat-loader'],
        type: 'javascript/auto' // 关键配置：禁用自动模块类型推断
      }
    ]
  }
};

javascript/auto是Webpack的内置模块类型，它会让Webpack回到传统的解析逻辑，不强制按文件后缀判断模块类型，这样loader输出的JS代码就能被正确识别了。

方式2：精准匹配单个/特定JSON文件 #

如果项目里还有其他普通JSON文件不需要用这个loader处理，为了不影响全局配置，可以精准匹配目标文件：

module.exports = {
  module: {
    rules: [
      {
        test: /src\/messages\.json$/, // 只匹配你需要处理的那个JSON文件
        use: ['messageformat-loader'],
        type: 'javascript/auto'
      },
      // 保留普通JSON文件的默认处理规则
      {
        test: /\.json$/,
        exclude: /src\/messages\.json$/,
        type: 'json'
      }
    ]
  }
};

验证方法 #

配置修改完成后，重启Webpack开发服务器或者重新执行构建命令，你会发现之前的Module parse failed报错已经消失了。如果还有问题，可以检查一下messageformat-loader的版本是否兼容Webpack 4，或者有没有其他loader的规则和这个配置冲突。

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