React应用引入图片报Module parse failed错误如何解决

webpack 原生仅支持解析 JS、JSON 类型的模块，碰到 jpg 这类二进制静态资源时，需要配置对应的 loader 完成转译。你虽然已经在项目依赖中安装了 file-loader、url-loader，但 webpack.config.js 的 module.rules 配置项中没有新增匹配图片格式的处理规则，webpack 无法识别图片文件格式，因此抛出解析错误。

修改 webpack.config.js 配置，在 module.rules 数组中新增图片资源处理规则即可，以下是两种可选配置方案：

方案1：使用 url-loader（推荐） #

url-loader 可以在小体积图片时自动转 base64 内嵌到代码中，减少网络请求，完整配置如下：

var webpack = require('webpack');
var path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: [
    path.join(__dirname, './src/index.js')
  ],
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: [{ loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/react'] } }],
    },
    { 
      test: /\.(less|css|scss)$/, 
      use: ['style-loader', 'css-loader', 'less-loader',] 
    },
    // 新增以下图片处理规则
    {
      test: /\.(png|jpg|jpeg|gif|svg|webp)$/,
      use: [{
        loader: 'url-loader',
        options: {
          // 小于8KB的图片转base64内嵌，大于阈值的自动调用file-loader输出为独立文件
          limit: 8 * 1024,
          // 配置打包后图片的输出路径和命名规则
          name: 'static/img/[name].[hash:8].[ext]',
          // 关闭ES模块导出，避免图片引入时出现路径为[object Module]的问题
          esModule: false
        }
      }]
    }
    ]
  },
  output: {
    path: path.join(__dirname, '/public'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.join(__dirname, '/public'),
    // historyApiFallback: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ]
}

方案2：使用 file-loader #

如果不需要 base64 转码功能，直接配置 file-loader 即可：

// 在module.rules中新增规则
{
  test: /\.(png|jpg|jpeg|gif|svg|webp)$/,
  use: ['file-loader']
}

配置修改完成后，重启本地开发服务，重新执行 npm run start 即可正常引入图片。

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