React项目添加图片时触发webpack Module Parse Fails错误如何解决

错误原因 #

你的webpack配置中未配置针对图片类二进制资源的解析规则，webpack遇到png/jpeg/svg这类文件时没有对应的处理逻辑，因此触发解析失败报错。

具体修复步骤 #

1. 新增图片资源解析规则 #

如果你使用的是webpack5版本，直接用官方内置的Asset Modules处理图片即可，无需额外安装第三方loader。
在你webpack.config.js的module.rules数组中，添加如下规则：

{
  test: /\.(png|jpe?g|gif|svg)$/i,
  type: 'asset/resource',
}

添加完成后你的module.rules结构参考：

module: {
  rules: [
    // 原有js、css、sass的规则全部保留不动
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: { loader: "babel-loader" },
    },
    {
      test: /\.m?\js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],
          plugins: [
            ["@babel/plugin-proposal-class-properties", { loose: true }],
            "@babel/plugin-transform-runtime",
          ],
        },
      },
    },
    {
      test: /\.s[ac]ss$/i,
      use: ["style-loader", "css-loader", "sass-loader"],
    },
    {
      test: /\.css$/i,
      use: ["style-loader", "css-loader"],
    },
    // 新增的图片规则放在最后即可
    {
      test: /\.(png|jpe?g|gif|svg)$/i,
      type: 'asset/resource',
    }
  ]
}

如果你使用的是webpack4及以下版本，先安装file-loader依赖，再将上述图片规则的type字段替换为use: ['file-loader']即可。

2. 优化冗余配置（可选） #

你当前的main配置中重复定义了两次output字段，建议删除第一次声明的仅包含bundle.js配置的那段output，避免后续出现配置冲突。

3. 验证效果 #

修改配置后必须重启webpack devServer或者重新执行构建命令，配置才会生效，之后再引入图片即可正常解析，不会再触发报错。 #

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