Reactjs 网页包文件加载程序publicPath

我有一个react项目，我使用Webpack3.10.0和FileLoader1.1.6将一些图像和json文件移动到我的分发文件夹中

Webpack按预期发出文件，但react为我的json和图像资产接收错误的URL

我的标记看起来像：

<img src="../images/helloworld_a49183cf48e4a0f12aa2124fe2ed9d3a.png" 
alt="Hello World!!">

因此，与其

{
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name (file) {
            /*if (env === 'development') {
              return '[path][name].[ext]'
          }*/
            return '[name]_[hash].[ext]'
          },
          publicPath: '/assets/images/',
          outputPath: '../images/'
        }  
      }
    ]
  },

你可以试试类似的东西

{
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name (file) {
            /*if (env === 'development') {
              return '[path][name].[ext]'
          }*/
            return '[name]_[hash].[ext]'
          },
          publicPath: function(url) {
              return url.replace(../, '/assets/')
          },
        }  
      }
    ]
  },

---

您还可以将输出对象配置为高于级别，然后仅指定文件的名称：

  output: {
    path: path.resolve(__dirname, 'dist/assets'),
    filename: 'js/bundle.js'
  },

例如，对于json：

{
    test: /\.json$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: 'data/[name].[ext]',
            }
      }
    ]
}

---

今天早上我的机器重新启动后，问题变了？！！？（缓存问题！）。。。它不再忽略publicPath，而是将publicPath与outputPath连接起来。 与此处解释的问题相同：

恢复到0.10.1可以解决我的问题

---

感谢所有试图帮助你的人

谢谢你的建议。不幸的是，它没有起作用。在您的示例中，没有outputpath，因此文件将与我的捆绑包位于同一目录中。我添加了outputpath，并且发出的文件最终位于正确的文件夹中。没有outputpath的情况下，img src标记仍然反映了错误的路径。我错误地将url.replace的第一个参数包装为引号。现在我已经搬走了。也许这就是它不起作用的原因。不管怎样，很高兴你现在找到了解决办法谢谢，但你误解了我。我还是没让它工作。如果你想尝试，我创建了回购协议：我真的很感谢你的帮助！谢谢我要试一试。感觉像是一个解决办法：）。难道文件加载器不能做我想要的吗？是的，但它可以做你想要的。您指定了

。/images/

并且您的链接以

。/images/[…]

开头，因此它可以工作。那么publicPath是做什么的呢？好的，outputPath应该驱动发出文件的parh，publicPath应该返回到导入或包含函数。

  output: {
    path: path.resolve(__dirname, 'dist/assets'),
    filename: 'js/bundle.js'
  },

{
    test: /\.json$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: 'data/[name].[ext]',
            }
      }
    ]
}