React项目使用file-loader导入图片报错，求解决方案

嘿，我一眼就揪出问题所在了——你的Webpack输出配置写错了！

问题根源 #

你当前的output配置把输出路径和文件名混在了一起：

output: {
  filename: 'dist/public/bundle.js',
},

这种写法会让Webpack混淆输出目录与文件名，导致file-loader无法正确生成图片资源的引用路径。最终你导入的不是Webpack处理后的路径字符串，而是原始的图片二进制文件，Node尝试把图片当成JavaScript代码解析，自然就抛出了Invalid or unexpected token的错误（报错里的�PNG就是图片文件的二进制开头标识）。

解决步骤 #

1. 修正Webpack的output配置
   把path和filename拆分开，明确指定输出目录和打包文件名：

const path = require('path');
module.exports = {
  // ...其他配置
  output: {
    path: path.resolve(__dirname, 'dist/public'), // 指定所有打包文件的输出根目录
    filename: 'bundle.js', // 仅指定bundle的文件名
    publicPath: '/' // 可选但推荐，确保资源引用路径绝对正确
  },
  // ...其他配置
}

2. 可选：优化图片输出路径
   如果想让图片规整地存到指定目录，可以给file-loader添加name配置：

{
  test: /\.(png|jpg|gif)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: 'images/[name].[ext]' // 图片会输出到dist/public/images目录下
      }
    }
  ]
}

3. 重新打包测试
   修改完配置后，重新运行Webpack打包命令，再导入图片就不会出现解析错误了。

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